Vue 进阶（二十五）：＜component＞实现动态组件

No Silver Bullet

关注

发布于: 4 小时前

一、前言

<component>元素是vue 里面的内置组件。

在<component>里面使用 :is，可以实现动态组件的效果。

二、示例解析

下面例子创建一个包含多子组件的 vue 实例。

vue代码部分：新建 vue 实例 "app"，这个实例的 components 里面，有 3 个组件，这些组件都有各自的模板。分别是 acomp，bcomp，ccomp
html 代码部分：使用vue 内置组件 <component></component>，并使用 "is" 特性（需要通过v-bind 给 "is" 绑定值）。"is" 绑定值传入一个组件名，就会切换到这个组件。

<div id="app">   <component :is="whichcomp"></component>    <button @click="choosencomp('a')">a</button>   <button @click="choosencomp('b')">b</button>   <button @click="choosencomp('c')">c</button> </div>
//做一个包含列表组件//需要给组件创建props--"todos",用于存放组件通过绑定prop --"todo"获取实例中的data数据"todolists"var app=new Vue({    el: '#app',  components:{    acomp:{       template:        <p>这里是组件A</p>    },    bcomp:{       template:        <p>这里是组件B</p>    },    ccomp:{      template:        <p>这里是组件C</p>    }},  data:{whichcomp:""},  methods:{     choosencomp (x) {         this.whichcomp=x+"comp"       }    }})