vue学习笔记17 component 标签

component 标签

Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

 

例：

1、自定义3个组件

var cpA={

　　template:`<div>我是组件A</div>`

}

...

2、在构造器里挂载组件

components:{

　　"cpA":cpA

}

 

3、html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件。

<component v-bind:is="who"></component>
<button @click="changeCp">更换组件</button>

methods:{
　　changeCp:function(){
　　if(this.who=="cpA"){
　　　　　　this.who="cpB"
　　　　}else if(this.who=="cpB"){
　　　　　　this.who="cpC"
　　　　}else{
　　　　　　this.who="cpA"
　　　　}
　　}
}