Vue动态组件与内置组件浅析讲解

闲话少说,我们进入今天的小小五分钟学习时间,前面我们了解了vue的组件,我们本文主要是讲解vue的动态组件和内置组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、动态组件

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

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

示例代码:

  组件之间的传递 

小小闲置网

王者账号: 电话: 估价:

运行结果:

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

二、内置组件

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

实例代码:

  组件之间的传递 

小小闲置网

王者账号: 电话: 估价:

运行结果:

以上就是Vue动态组件与内置组件浅析讲解的详细内容,更多关于Vue动态组件与内置组件的资料请关注0133技术站其它相关文章!

以上就是Vue动态组件与内置组件浅析讲解的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程