vue组件与选项卡：动态显示多个组件实例并避免状态复用
本文介绍如何利用Vue的component标签和选项卡组件，动态渲染多个相同组件的实例，且每个实例拥有独立状态，互不干扰。我们将分析一个实际案例，并提供解决方案。
问题：组件状态复用
用户希望使用选项卡组件（例如el-radio-group）结合Vue的component标签，动态显示多个相同组件的实例。每个实例接收不同的参数，并保持自身状态独立。但使用keep-alive缓存组件实例后，切换选项卡时，组件实例并未重新创建，而是复用了之前的实例，导致参数更新后，之前输入的内容也被覆盖。
代码分析与问题根源
立即学习“前端免费学习笔记（深入）”；
核心问题在于选项卡切换时，组件实例的复用。尽管传递的参数(message)改变了，但由于keep-alive缓存了组件实例，component标签仍然复用了同一个实例。因此，组件内部状态（例如输入框内容）未重置，与预期不符。
解决方案：使用唯一的key属性
keep-alive缓存组件实例是问题的关键。解决方法是为component标签添加一个唯一的key属性。每次组件实例创建时，key值必须不同，才能让Vue区分不同的组件实例，避免复用。
修改后的代码示例 (仅修改app.vue)
测试
{{ item.label }}
通过添加:key="radio1"，每次radio1值变化，component都会被视为新的实例，从而解决状态复用问题。 每个选项卡对应一个独立的组件实例，拥有独立的状态。
通过以上方法，即可实现动态显示多个组件实例，并有效避免组件状态复用，确保每个实例的独立性。
