Vue组件选项卡动态显示多个组件实例时，如何避免组件状态复用？

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

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

问题：组件状态复用

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

代码分析与问题根源

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

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

解决方案：使用唯一的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>

登录后复制