0
点赞
收藏
分享

微信扫一扫

[vue] Vue动态组件


让多个组件使用同一个挂载点,并动态切换,这就是动态组件。

通过使用保留的 ​​<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] Vue动态组件_Vue


​​Vue动态组件​​​Vue2动态组件​​


举报

相关推荐

0 条评论