vue中的动态组件

---

一、概念

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

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent 可以包括

• 已注册组件的名字，或
• 一个组件的选项对象

---

二、代码演示

1、is 属性绑定已注册组件的名字

<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>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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>'
      }