如何使用 `` 和 Tab 选项卡组件，实现显示多个同一组件的实例，并保留每个实例的状态？

如何使用 component 和 tab 选项卡组件，实现显示多个同一组件的实例？

在需要动态显示多个相同组件的情况下，可以使用 标签配合 Tab 选项卡组件来实现。 标签允许动态加载组件，而 Tab 选项卡可以提供一个方便的切换界面。

演示代码

Elser AI Comics

一个免费且强大的AI漫画生成工具，助力你三步创作自己的一出好戏

下载

<template>
  <div>
    <el-radio-group v-model="radio1" @input="radio_onchange">
      <el-radio-button v-for="item in page_list" :key="item.view_code" :label="item.label">{{item.label}}</el-radio-button>
    </el-radio-group>
    <div>
      <keep-alive>
        <component :is="radio1" :message="message" :key="radio1">
          <!-- 组件内容 -->
        </component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Test1 from '@/testComponent/test1.vue';
import Test3 from '@/testComponent/test3.vue';

export default {
  data() {
    return {
      radio1: "a1",
      message: undefined,
      page_list: [
        { seq: 1, view_code: "a1", label: "测试1", type: 1 },
        { seq: 3, view_code: "b0", label: "特定测试组件A", type: 2, message: "参数777", is_regist: false },
        { seq: 4, view_code: "bc", label: "特定测试组件B", type: 2, message: "参数666", is_regist: false },
      ],
    };
  },
  components: {
    a1: Test1,
  },
  methods: {
    radio_onchange(value) {
      const item = this.page_list.find(item => item.view_code === value);
      if (item.type !== 2) {
        return;
      }
      if (item.is_regist === false) {
        Vue.component(item.view_code, Test3);
        this.message = item.message;
        item.is_regist = true;
      }
    },
  },
};
</script>

关键点说明：

• 在 元素外套一层 ，并添加 key 键（例如 :key="radio1"）。 可以保留组件的状态，并阻止组件在切换时被销毁。
• 为 设置 :is 属性，其值为需要加载的组件名（例如 :is="radio1"）。
• 为 传递参数和数据，例如 :message="message"。

通过这种方式，每次切换 Tab 时，都会加载一个新的组件实例，并且每个组件实例都有自己独立的状态。