动态地绑定到它的 is 特性，可以实现动态组件

Posted 2020-10-16 莫笑我胡为

前面的话

　　让多个组件使用同一个挂载点，并动态切换，这就是动态组件。本文将详细介绍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>

也可以直接绑定到组件对象上

<div id="example">
  <button @click="change">切换页面</button>
  <component :is="currentView"></component>
</div>

<script>
new Vue({
  el: ‘#example‘,
  data:{
    index:0,
    arr:[
      {template:`<div>我是主页</div>`},
      {template:`<div>我是提交页</div>`},
      {template:`<div>我是存档页</div>`}
    ],
  },
  computed:{
    currentView(){
        return this.arr[this.index];
    }
  },
  methods:{
    change(){
      this.index = (++this.index)%3;
    }
  }
})
</script>