<div id="demo">
<component v-bind:is="currentComponent">taozi</component>
<button @click="click">切换</button>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script>
Vue.component('slot-welcome',{
template:`<div>
<p>welcome</p>
<slot></slot>
</div>`
})
Vue.component('slot-hello',{
template:`<div>
<p>hello</p>
<slot></slot>
</div>`
})
var vm = new Vue({
el:"#demo",
data:{
currentComponent:'slot-hello'
},
methods:{
click(){
if(this.currentComponent === "slot-welcome"){
this.currentComponent = "slot-hello"
}else {
this.currentComponent = "slot-welcome"
}
}
}
})
//参考: https://kaven.blog.csdn.net/article/details/109621293
</script>
is attribute 来切换不同的组件
猜你喜欢
转载自blog.csdn.net/u012687612/article/details/112236727
今日推荐
周排行