父组件通过数组v-for循环可以动态的添加、删除组件

<li v-for="(item, index) in personCheckList" :key="index" :data-key="item.key">
      <work-zong-jie v-if="item.value === 'workZongJie'" :record="item" ref="workZongJieRef"></work-zong-jie>
</li>

组件添加.png

删除key：1793的组件之后的效果.png

这就会发生一个比较有趣的事情，所对应的key组件确实删除了，没有任何问题，但是，组件里面的data值会改成第一个组件的值，查阅了很多资料发现是v-for的key出现了问题。一般写v-for组件的时候，我都习惯性的将index值赋值给key。但是，当我删除第一个组件的时候key为0，数组的第二个组件的key也会变成0，所以，因为key的赋值，导致数组的删除出现了data的值的混淆，代码修改如下：

<li v-for="item in personCheckList" :key="item.key" :data-key="item.key">
      <work-zong-jie v-if="item.value === 'workZongJie'" :record="item" ref="workZongJieRef"></work-zong-jie>
</li>

key值说明：
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们。v-for首次循环显示时给每个子元素加一个唯一的key，在页面刷新或者DOM改变时就会通过之前的key快速将其渲染出来