vue组件与选项卡：动态显示多个组件实例并避免状态复用

本文介绍如何利用Vue的component标签和选项卡组件，动态渲染多个相同组件的实例，且每个实例拥有独立状态，互不干扰。我们将分析一个实际案例，并提供解决方案。

问题：组件状态复用

用户希望使用选项卡组件（例如el-radio-group）结合Vue的component标签，动态显示多个相同组件的实例。每个实例接收不同的参数，并保持自身状态独立。但使用keep-alive缓存组件实例后，切换选项卡时，组件实例并未重新创建，而是复用了之前的实例，导致参数更新后，之前输入的内容也被覆盖。

代码分析与问题根源

立即学习“前端免费学习笔记（深入）”；

核心问题在于选项卡切换时，组件实例的复用。尽管传递的参数(message)改变了，但由于keep-alive缓存了组件实例，component标签仍然复用了同一个实例。因此，组件内部状态（例如输入框内容）未重置，与预期不符。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

解决方案：使用唯一的key属性

keep-alive缓存组件实例是问题的关键。解决方法是为component标签添加一个唯一的key属性。每次组件实例创建时，key值必须不同，才能让Vue区分不同的组件实例，避免复用。

修改后的代码示例 (仅修改app.vue)

<template>
  <div>
    <h1>测试</h1>
    <el-radio-group v-model="radio1">
      <el-radio-button :key="index" :label="item.view_code" v-for="(item, index) in page_list">
        {{ item.label }}
      </el-radio-button>
    </el-radio-group>
    <keep-alive>
      <component :is="radio1" :key="radio1" :message="message"></component>
    </keep-alive>
  </div>
</template>

通过添加:key="radio1"，每次radio1值变化，component都会被视为新的实例，从而解决状态复用问题。 每个选项卡对应一个独立的组件实例，拥有独立的状态。

通过以上方法，即可实现动态显示多个组件实例，并有效避免组件状态复用，确保每个实例的独立性。