vue动态添加、删除子组件
实现的功能:1、父组件中点击“新增按钮”,新增一个子组件2、在子组件中点击“删除按钮”,删除对应的子组件源码:父组件 Parent.vue 源码<template><div><button @click="add">添加</button><childrenv-for="(item,i...
·
实现的功能:
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>
更多推荐
已为社区贡献1条内容
所有评论(0)