vue动态添加、删除子组件。父组件与子组件数据对应不上？

Question

实现的功能：
1、父组件中点击“新增按钮”，新增一个子组件
2、在子组件中点击“删除按钮”，删除对应的子组件

遇见的问题：
在子组件删除内容时，子组件并没有被删除。
如图：

源码：
父组件 Parent.vue 源码
<template>

<div>
    <button @click="add">添加</button>
    <children 
        v-for="(item,index) in arr" 
        :key="index"
        :index="index"
        @remove="remove">
    </children>
</div>

</template>

<script>
import Children from '@/components/Children'

export default {

data() {
    return {
        t:0,
        arr:[]
    };
},
components: {
    Children
},
methods: {
    //点击新增子组件 
    add(){
        this.arr.push({})
    },

    //删除子组件
    remove(n){
        this.arr.splice(n,1); 
    }
}

};
</script>

子组件 Children.vue 源码
<template>

<div>
    <div class="box">
        <input type="text" placeholder="请输入内容后再删除" />
        <button @click="del(index)">删除</button>
    </div>
</div>

</template>
<script>
export default {

data() {
    return {

    };
},
props: ['index'],
methods: {
    del(n){
        this.$emit('remove',n);
    }
}

};
</script>

<style scoped>

span{
    margin-right: 10px
}

.box{
    display: flex;
    margin: 10px 0;
}

</style>

Answer 1

原因： 下标取错

<button @click="del(index)">删除</button>

这里取得到index ? No,

del(){

   // 这里直接this.index，不就拿到下标了吗？
    this.$emit('remove', this.index);
}

Answer 2

我想你的答案在这里：https://segmentfault.com/q/10...

Answer 3

data中维护一个数据的源数组用于循环渲染。但是在绑定key为列表中的index话，删除时组件销毁可能会出现问题。这源于Vue内部的组件销毁机制，因此key尽量绑定为一个uniqueId。