function:
1. Click "add button" in the parent component, add a new child component
2, click "delete button" in the child component, and delete the corresponding child component
problem encountered:
when the child component deletes content, the child component is not deleted.
as shown in figure
Source Code:
parent component Parent.vue Source Code
< 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 >
subcomponent Children.vue source code
< 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 >