vue组件选项卡：实现多个组件实例数据独立
本文介绍如何使用Vue组件和选项卡组件，动态显示多个相同组件的实例，并确保每个实例的数据相互独立。
问题：开发者希望通过选项卡（例如，使用el-radio-group）切换不同的组件，且同一组件可被多次加载，每次加载都拥有独立数据。使用keep-alive和component组件后，发现多个实例共享数据，未能达到预期效果。
原因：keep-alive缓存组件实例，导致后续切换到同一组件时复用之前的实例，即使传递不同的参数，数据仍然共享。
解决方案：为每个组件实例添加唯一的key属性。
立即学习“前端免费学习笔记（深入）”；
修改后的代码（app.vue）：
在标签中添加key属性，该属性值在每次创建组件实例时都必须不同。 我们可以结合item.view_code和递增索引来确保key的唯一性。
<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 + '-' + (page_list.find(item => item.view_code === radio1)?.seq || 0)" :message="message"> </component> </keep-alive> </div></template>
登录后复制
本文来自互联网或AI生成，不代表软件指南立场。本站不负任何法律责任。
