<component> 元素是vue 里面的一个内置组件。
在<component>里面使用 v-bind: is，可以实现动态组件的效果。
例子解析：
下面例子创建一个包含多个子组件的 vue 实例。
1. vue代码部分：新建 vue 实例 "app"，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp，bcomp，ccomp
2. html 代码部分：使用vue 的内置组件 <component></component>，并使用 "is" 特性（需要通过v-bind 给 "is" 绑定一个值）。"is" 绑定的值传入一个组件名，就会切换到这个组件。
<div id="app">
<component v-bind:is="whichcomp"></component>
<button v-on:click="choosencomp('a')">a</button>
<button v-on:click="choosencomp('b')">b</button>
<button v-on: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:function(x){
this.whichcomp=x+"comp"}
}
})
网页渲染效果：
点击 A 按钮，文字显示切换到 "显示组件A"
点击C 按钮，文字显示切换到 "显示组件C"