Vue动态组件

• 动态组件就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。
• 在挂载点使用 component 标签，然后使用 is =“组件名”，它会自动去找匹配的组件名，如果有，则显示

通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以实现动态组件

<div id="example">
  <button @click="change">切换页面</button>
  <keep-alive>
    <component :is="currentView"></component>  
  </keep-alive>
</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(){
      let len = this.arr.length;
      this.index = (++this.index)% len;
    }
  }
})
</script>