vue - vue的动态组件(component)使用

动态组件是为了不切换路由只在一个组件中进行其他不同组件之间的动态切换；保证复用性和可维护性；

下面就是一个切换栏的例子：

1，效果图如下：
当点击上面的A、B、C组件按钮进行切换时，下面的组件也会动态的切换；

2，实现如下：
vue的动态组件切换是使用了内置组件component和 is属性 进行绑定的；可以说is绑定的就是组件对应的名字；

<template>
  <div class="Father">
    <h1>动态组件演示：</h1>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane :label="item.label" :name="item.name" v-for="(item, index) in tabList" :key="index">
        <component :is="item.compName" :label="item.label"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
// 引入组件
import A from './component/A.vue';
import B from './component/B.vue';
import C from './component/C.vue';
export default {
// 注册组件
  components: {
    A,
    B,
    C,
  },
  data() {
    return {
      activeName: 'first',
      tabList: [
        {
          label: 'A组件',
          name: 'first',
          compName: 'A',
        },
        {
          label: 'B组件',
          name: 'second',
          compName: 'B',
        },
        {
          label: 'C组件',
          name: 'third',
          compName: 'C',
        },
      ],
    };
  },
  methods: {
    handleClick(tab,event) {
      console.log('tab:', tab);
      console.log('event:', event);
    },
  },
};
</script>

3，动态组件不仅可以循环控制 还可以通过is绑定进行主动切换

下面案例是本来渲染的是A组件；点击按钮就会切换到B组件； 如果想要传值的话 可以通过自定义属性进行正常的传值；

代码如下：

<template>
  <div class="Father">
    <h1>动态组件演示：</h1>
    <!-- 第二种动态组件使用 -->
    <div>
      <button @click="onClick">点击切换B组件</button>
      <component :is="compName"></component>
    </div>
  </div>
</template>
<script>
import A from './component/A.vue';
import B from './component/B.vue';
import C from './component/C.vue';
export default {
  components: {
    A,
    B,
    C,
  },
  data() {
    return {
    // 默认绑定的组件名称 可以动态切换
      compName: 'A',
    };
  },
  methods: {
    // 点击切换组件
    onClick() {
      this.compName = 'B';
    },
  },
};
</script>