vue中当多个组件同时绑定一个变量(引用类型),会出现修改其中一个组件中的变量时导致其他组件同时修改的情况

front-end,vue

2019-06-27

135

0

vue中当多个组件同时绑定一个变量(引用类型),会出现修改其中一个组件中的变量时导致其他组件同时修改。

这是因为多个组件指向的都是同一个内存地址。例如:

当页面中同时存在两个select,并且时多选模式时,select的值时一个数组。

template中:
<Select v-model="nameid" multiple @on-change="select($event)"></Select>

<Select v-model="nameid" multiple  @on-change="select($event)"></Select>
methods中:
select(event){
  console.log(event) 
}

当我们在select方法中打印event,发现会出现两条log,这就是因为两个select组件的值指向的是同一内存地址,所以导致了这种情况。

如果把multiple去掉,此时select的值默认时String,则不会出现这种情况。

所以在操作多个组件时一定要考虑组件的值是什么类型!!!改bug好心累!!

 

发表评论

全部评论:0条

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01