Vue自带的标签有:component,transition,transition-group,keep-alive,slot
在这里我先介绍component标签: 它是Vue内置的标签,它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.
比如:这个效果效果:
代码如下:
<body>
<div id="app">
<component :is="who"></component>
<button @click="changeComponent">changeComponent</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let componentA={
template:`<div>I am componentA</div>`
}
let componentB={
template:`<div>I am componentB</div>`
}
let componentC={
template:`<div>I am componentC</div>`
}
let app = new Vue({
el: '#app',
data:{
who:'componentB'
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC
},
methods: {
changeComponent(){
if(this.who=="componentA"){
this.who="componentB"
}
else if(this.who=="componentB"){
this.who="componentC"
}else{
this.who="componentA"
}
}
},
})
</script>
</body>