Vue实现动态组件的切换

在这里跟大家分享一下如何实现动态组件的切换，举个例子，就比如组件库中的Steps步骤条，我们可能会去实现一个步骤显示一个页面这样的一个功能。

首先我们要了解component组件，他是vue内置的一个组件，提供了一个is属性来动态的渲染组件

  <!-- 通过is属性动态切换组件 -->
    <div class="steps-content">
      <compoment :is="pro[current]"></compoment>
    <div>

这里的pro是我自定义的一个数组，current则是Steps步骤条组件绑定的页码

下面直接通过代码来演示一下如何使用，这里我使用的是ant-design-vue组件库

<template>
  <div>
    <a-card>

      //步骤条组件
      <a-steps :current="current" labelPlacement="vertical">
        <a-step
          v-for="item in steps"
          :key="item.title"
          :title="item.title"
        ></a-step>
      </a-steps>
    </a-card>

    <!-- 通过is属性动态切换组件 -->
    <div class="steps-content">

    <!--可以通过keep-alive组件缓存，来保留切换时的数据-->
     <keep-alive>
      <compoment :is="pro[current]"></compoment>
     </keep-alive>
      <a-card>
        <div>
          <a-button v-if="current > 0" @click="prev">
            上一步
          </a-button>
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
          >
            完成
          </a-button>
          <a-button
            v-if="current < steps.length - 1"
            type="primary"
            @click="next"
          >
            下一步
          </a-button>
        </div>
      </a-card>
    </div>
  </div>
</template>
<script>

// 这里是导入大家要显示的组件
import Pro1 from '';
import Pro2 from '';
import Pro3 from '';
import Pro4 from '';
export default {
  data() {
    return {
      direction: 'horizontal',
      current: 0,

      // 自定义is的属性绑定的数据
      // 一定要注意顺序和页面相对应
      pro: [
        'Pro1',
        'Pro2',
        'Pro3',
        'Pro4',
      ],
      // 每一步的名称
      steps: [
        {
          title: '第一步',
        },
        {
          title: '第二步',
        },
        {
          title: '第三步',
        },
        {
          title: '第四步',
        }
      ],
    };
  },
  methods: {
    // 下一步
    next() {
      this.current++;
    },
    // 上一步
    prev() {
      this.current--;
    },
  },
    //注册组件
  components: {
     Pro1,
     Pro2,
     Pro3,
     Pro4,
  },
};
</script>

参考

Vue官网-组件基础