当前位置: 首页 > Web前端 > vue.js

复用组件数据相互影响

时间:2023-04-01 01:22:36 vue.js

问题描述:在一个子组件中,通过一个按钮来控制div的显示和隐藏(v-if实现),两个div中使用的是同一个自定义组件,但是两个组件数据相互影响。select_show的初始值为false。可以看到这里game属性切换到了channel属性,select_show属性同步变化。当前过滤:游戏属性

当前过滤:频道属性
{{btn_name}}{{select_show}}<选择器v-model="mult_group":data="sselectList"搜索:title="['Level1','Level2']"@on-select="selectAll"@on-delete="delTag"@on-clear="clearTag"/>
数据(){return{checked:true,select_show:false,}},methods:{select_handle(){this.select_show=!this.select_show},}问题分析:测试发现在同一个div组件中复用了两个自定义数据不会互相影响,考虑到两个相同的组件在第一次渲染的时候会为其数据分配一块内存,但是当另一个div的v-if为真时,会指向前一个div的数据.同一个内存,不同的变量指向同一个地址,也可能和keep-alive有关,这里可以看到在同一个div中不会有相互影响,因为两个子组件的数据是分开分配的渲染过程中。。问题解决:比较粗略的方法是再复制一份代码,重写一个组件,但是这种方法会造成代码冗余,可以也可以考虑通过prop将父组件的参数传给子组件,这样就不会因为数据是通用的而互相影响,但是如果参数很多,代码会显得很乱。比较优雅的方式是使用v-show,因为v-show会在渲染开始的时候渲染DOM。只要有DOM,就会为这些相同的子组件的数据分配不同的内存,所以它们不会互相影响,但是缺点是会比较消耗内存,不过这里影响不是很大.