让多个组件使用同一个挂载点,并动态切换,这就是动态组件。
通过使用保留的 <component>
元素,动态地绑定到它的is
特性,可以实现动态组件
<div id="example">
<button @click="change">切换页面</button>
<component :is="currentView"></component>
</div>
<script>
var home = {template:'<div>我是主页</div>'};
var post = {template:'<div>我是提交页</div>'};
var archive = {template:'<div>我是存档页</div>'};
new Vue({
el: '#example',
components: {
home,
post,
archive,
},
data:{
index:0,
arr:['home','post','archive'],
},
computed:{
currentView(){
return this.arr[this.index];
}
},
methods:{
change(){
this.index = (++this.index)%3;
}
}
})
</script>
Vue动态组件Vue2动态组件