您的位置:首页 > Web前端 > Vue.js

Vue中的动态组件(v-bind:is)的使用及组件传值

2019-08-18 17:10 225 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/weixin_43799793/article/details/99705374

Vue中的动态组件(v-bind:is)的使用及组件传值

  1. 在一个多标签的界面中使用 “ is ”特性来切换不同的组件:

<component v-bind:is ="currentTabComponent"></component>

  1. 有时候我们需要标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 元素将其动态组件包裹起来。
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
  1. 组件传值

父组件:
注册并引入局部(子)组件,(自定义组件名为子组件文件名称)
子组件:
通过props 属性接收父组件的传值,定义类型,模板中用 “is” 特性来进行切换

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: