Vue-动态组件

动态组件

　　所谓的动态组件就是在不同的组件之间进行动态切换。

　　Vue提供了一个特殊的元素<component>用来动态的挂载不同的组件 使用is 属性来选择要挂载的组件。

<component v-bind:is="mytemp"></component>

　　mytemp可以是已经注册的组件的名字，也可以是一个组件的选项对象、

1.当mytemp是注册组件时

<template>、
<div id="app">
  <button @click="changeView('A')">切换到组件A</button>
  <button @click="changeView('B')">切换到组件B</button>
  <button @click="changeView('C')">切换到组件C</button>
  <component :is="currentView"></component>
</div>
</template>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      currentView: 'comA'
    },
    components: {
      comA: {
        template: '<div>组件A</div>'
      },
      comB: {
        template: '<div>组件B</div>'
      },
      comC: {
        template: '<div>组件C</div>'
      }
    },
    methods: {
      changeView(component) {
        this.currentView = 'com' + component;
      }
    }
  });
</script>

2.当mytemp是组件对象时

<template>
<div id="app">
  <component :is="currentView"></component>
</div>
</template>
<script>
  let Home = {
    template:'<div>这是一个组件</div>'
  }

  let vm = new Vue({
    el: "#app",
    data: {
      currentView: Home
    }
  });
</script>