
vue组件与选项卡:动态加载避免实例复用
本文讨论如何使用Vue的component组件和选项卡组件(示例中使用el-radio-group和el-radio-button模拟)动态加载多个相同组件实例,并为每个实例传递不同的参数,避免实例复用导致数据丢失的问题。
问题:使用keep-alive缓存组件实例时,切换选项卡,组件只创建一次,参数改变后,之前输入内容丢失。 keep-alive旨在缓存组件,并非解决实例唯一性的方案。
解决方案:为component组件添加唯一的key属性。key属性是Vue追踪虚拟DOM节点身份的标识符。 不同的key值能让Vue区分组件实例,从而创建新的实例而不是复用。
关键代码修改(仅展示核心部分):
立即学习“前端免费学习笔记(深入)”;
{{ item.label }}
修改后,标签添加了key属性,其值为activeTab。 由于activeTab的值随选项卡选择而改变,每次切换选项卡,key值都不同,Vue就会创建新的组件实例,避免复用。 key值必须唯一且在每次实例创建时变化。
通过为添加key属性,有效解决了组件实例复用问题,实现了动态加载多个独立组件实例的目标。










