vue组件与选项卡：动态加载避免实例复用
本文讨论如何使用Vue的component组件和选项卡组件（示例中使用el-radio-group和el-radio-button模拟）动态加载多个相同组件实例，并为每个实例传递不同的参数，避免实...
vue组件与选项卡：动态加载避免实例复用
本文讨论如何使用Vue的component组件和选项卡组件（示例中使用el-radio-group和el-radio-button模拟）动态加载多个相同组件实例，并为每个实例传递不同的参数，避免实例复用导致数据丢失的问题。
问题：使用keep-alive缓存组件实例时，切换选项卡，组件只创建一次，参数改变后，之前输入内容丢失。 keep-alive旨在缓存组件，并非解决实例唯一性的方案。
解决方案：为component组件添加唯一的key属性。key属性是Vue追踪虚拟DOM节点身份的标识符。 不同的key值能让Vue区分组件实例，从而创建新的实例而不是复用。
关键代码修改（仅展示核心部分）：
PHP
<template>
<div>
<el-radio-group v-model="activeTab">
<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="activeTab" :key="activeTab" :message="message"></component>
</keep-alive>
</div>
</template>修改后，
通过为
以上就是Vue组件动态加载：如何避免选项卡切换时组件实例复用？的详细内容，更多请关注知识资源分享宝库其它相关文章！
版权声明
本站内容来源于互联网搬运，
仅限用于小范围内传播学习，请在下载后24小时内删除，
如果有侵权内容、不妥之处，请第一时间联系我们删除。敬请谅解!
E-mail：dpw1001@163.com
![JavaScript数组复制：`new Array(...arr)`与`[...arr]`有何区别？（数组.复制.有何区别.JavaScript.arr.....）](http://www.shkangchun.com/zb_users/theme/ydit/include/random/4.jpg)
发表评论