vue父组件通过v-for循环多次调用同一个子组件，改变被循环数组个数，各子组件显示数据混乱

场景是这样的，动态添加子组件，在父组件中循环显示，可以随时增加活删除子组件

<div class="itemTemplate" v-for="(item,index) in templateList" :key="index"><Icon type="ios-close-circle-outline" size="32" @click="deleteTem(index)"/><child :data="childData[index]" />
</div>

父组件大概是这样，templateList用来控制模版个数，childData是传入子组件中的数据，添加模版时分别往templateList和childData中push数据，deleteTem()方法是删除模版的，用splice

// 删除模版
deleteTem(index) {this.templateList.splice(index, 1);if(this.childData.length > 0){this.childData.splice(index, 1);}
},

删除后面的模版不会有问题，但是删除前面或者中间的就会影响被删除组件后面所有的子组件的内容显示，比如有三个组件，删除第一个之后应该显示第二和第三个，组件确实只有两个，但是内容却是第一个和第二个的内容，打印templateList和childData中数据也是合适的，也是找了很久才找见问题，所以就记录一下。

这里主要问题在于v-for后面的key，这里key的值是数组的下标，将:key="index"改成具有唯一性标示的就行，这里是用了随机数:key="index+'-'+Math.random()"。

最开始写vue，由于编辑器在v-for之后不写key就会报红线，所以形成的习惯就是每次把index赋给key，一直也没出现过啥问题（主要是之前也没操作过v-for循环展示的内容），后来也去专门了解了一下key作用，大部分比较官方的说法都是唯一标示和高效更新虚拟DOM，唯一性不用说，这个高效更新虚拟DOM，我个人的理解就是在v-for首次循环显示时给每个子元素加一个唯一的key，在页面刷新或者DOM改变时就会通过之前的key快速将其渲染出来，反正说是这么说，理解也是这么理解，但是从来没有深切感受到。

在这里，删除了第一个，应该就不存在key="0" 的部分了，其实却不然，循环的数组改变了，下标0依然存在，key="0"也依然存在，会把之前key="0"的内容直接渲染出来，所以才会出现删除第一个以后，第一个的内容依然能显示。

关于key的作用，我觉得这篇文章讲得很明白，这里就不再赘述了，需要的可以去了解一下https://blog.csdn.net/JSN___/article/details/96018571

vue父组件通过v-for循环多次调用同一个子组件，改变被循环数组个数，各子组件显示数据混乱相关推荐

vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
vue 父刷新子_父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法...
场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...
vue父与子组件，子与子组件间的方法调用和通信
子与子之间通信的前提是有一个共同的父亲, 首先,在vue中,$+name是vue系统定义的实例属性或方法,vue的api上面写的有链接实例属性. $parent指的是当前组件的父实例.$refs指的是 ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
vue父组件中调用子组件中的方法及vue父组件调用孙子组件的方法
一:通过ref直接调用子组件的方法: 子组件child.vue: <template><div>我是子组件</div> </template> < ...
什么是VUE的父组件和子组件？那么父组件和子组件又是怎样传值的呢？
有时候我们经常分不清什么是父组件,什么又是子组件.现在来简单说下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件.以上是我个人 ...
Vue 子组件修改父组件值的解决方法
分析 vue中父组件向子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样可以防止子组件意外改变父组件的值,怕子组件污染父组件,造成不可控: 此外,每次父组件的数据发生更新时,子组件的 ...
vue 父组件中调用子组件的方法
Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中<template><div><Button @click=&qu ...
vue父组件向子组件动态传值的两种方法
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空 ...

vue父组件通过v-for循环多次调用同一个子组件，改变被循环数组个数，各子组件显示数据混乱

vue父组件通过v-for循环多次调用同一个子组件，改变被循环数组个数，各子组件显示数据混乱相关推荐

最新文章

热门文章