vue动态添加、删除子组件

实现的功能：
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 {
        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>