怎么在vue中实现一个动态子组件

这期内容当中小编将会给大家带来有关怎么在vue中实现一个动态子组件，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

vue是什么软件

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

方式一：局部注册所需组件

<div id="example">  <button @click="change">切换页面</button>  <component :is="currentView"></component> </div> <script> var home = {template:'<div>我是主页</div>'}; var post = {template:'<div>我是提交页</div>'}; var archive = {template:'<div>我是存档页</div>'}; new Vue({  el: '#example',  components: {   home,   post,   archive,  },  data:{   index:0,   arr:['home','post','archive'],  },  computed:{   currentView(){     return this.arr[this.index];   }  },  methods:{   change(){    this.index = (++this.index)%3;   }  } }) </script>

使用<keep-alive>缓存

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition>相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

基本用法：

<div id="example">  <button @click="change">切换页面</button>  <keep-alive>   <component :is="currentView"></component>   </keep-alive> </div>

条件判断

如果有多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染:

<div id="example">  <button @click="change">切换页面</button>  <keep-alive>   <home v-if="index===0"></home>   <posts v-else-if="index===1"></posts>   <archive v-else></archive>   </keep-alive> </div> <script> new Vue({  el: '#example',  components:{   home:{template:`<div>我是主页</div>`},   posts:{template:`<div>我是提交页</div>`},   archive:{template:`<div>我是存档页</div>`},  },  data:{   index:0,  },  methods:{   change(){    let len = Object.keys(this.$options.components).length;    this.index = (++this.index)%len;   }  } }) </script>

activated 和 deactivated

activated 和 deactivated 在 <keep-alive> 树内的所有嵌套组件中触发:

<div id="example">  <button @click="change">切换页面</button>  <keep-alive>   <component :is="currentView" @pass-data="getData"></component>   </keep-alive>  <p>{{msg}}</p> </div> <script> new Vue({  el: '#example',  data:{   index:0,   msg:'',     arr:[    {      template:`<div>我是主页</div>`,     activated(){      this.$emit('pass-data','主页被添加');     },     deactivated(){      this.$emit('pass-data','主页被移除');     },        },    {template:`<div>我是提交页</div>`},    {template:`<div>我是存档页</div>`}   ],  },  computed:{   currentView(){     return this.arr[this.index];   }  },  methods:{   change(){    var len = this.arr.length;    this.index = (++this.index)% len;   },   getData(value){    this.msg = value;    setTimeout(()=>{     this.msg = '';    },500)   }  } }) </script>

include和exclude

include 和exclude属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

<!-- 逗号分隔字符串 --> <keep-alive include="a,b">  <component :is="view"></component> </keep-alive> <!-- 正则表达式 (使用 v-bind) --> <keep-alive :include="/a|b/">  <component :is="view"></component> </keep-alive> <!-- Array (use v-bind) --> <keep-alive :include="['a', 'b']">  <component :is="view"></component> </keep-alive>

匹配首先检查组件自身name选项，如果name选项不可用，则匹配它的局部注册名称（父组件 components 选项的键值）。匿名组件不能被匹配。

<keep-alive include="home,archive">   <component :is="currentView"></component>   </keep-alive>

上面的代码，表示只缓存home和archive，不缓存posts

方式二：动态注册组件实现

 asyncComponents(templateName){   this.curNavComponents = require(`./components/${templateName}.vue`).default; }

上述就是小编为大家分享的怎么在vue中实现一个动态子组件了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。