【Vue五分钟】 五分钟让你了解什么是动态组件和内置组件

前言

   这是一个整个系列vue五分钟学习,每天花上五分钟就可以读懂vue的每一个小知识,前面本小编已经给大家总结了vue的组件的相关知识,大家可以到博主博客寻找喜欢的博客阅读即可,博客不易,希望大家能点个赞,你的每一个赞都是对本博主莫大的支持。

  好了,闲话少说,我们进入今天的小小五分钟学习时间,前面我们了解了vue的组件,我们本博文主要是讲解vue的动态组件和内置组件。

一、动态组件

  在vue中,有很多的组件可以挂载同一个挂载点上面,要在同一个挂载的点上的多个组件之间可以实现动态的切换渲染,我们可以通过内置组件component的is属性动态的绑定组件,然后我们就可以根据is的值来决定哪一个组件要被渲染,非常的方便。 

我们通过一点简单的实例代码可以加深了解:

示例代码:




    组件之间的传递


    

小小闲置网

王者账号: 电话: 估价:

运行结果:

【Vue五分钟】 五分钟让你了解什么是动态组件和内置组件_第1张图片

我们可以看到三个按钮的value的值设置成了组件的名字,双向绑定cfl(惩罚陆,没什么含义,自己乱起的)数据,单击按钮,就可以改变value的值从而更新cfl里面的值;component组件的is属性动态的绑定了cfl里面的值,根据这个is就知道哪个组件被渲染了。

 

二、内置组件

根据上面的实例结果,我们看到了输入框里输入数据,当你切换到别的组件的时候,原来组件的数据不会被保存,所以内置组件可以包裹我们的动态组件,会将往期的组件进行缓存,而不是销毁,他会把切换回去的组件缓存起来,做到保留组件状态。

实例代码:




    组件之间的传递


    

小小闲置网

王者账号: 电话: 估价:

【Vue五分钟】 五分钟让你了解什么是动态组件和内置组件_第2张图片

 运行结果:

【Vue五分钟】 五分钟让你了解什么是动态组件和内置组件_第3张图片

 

你可能感兴趣的:(VUE,web,JavaScript,vue.js,javascript,前端)