Vue 2 中如何优雅地处理表单列表项添加与删除而不直接操作 props？-灵析社区

vue2做一个类似表单列表的东西，可添加删除表单项，但是目前是直接操作props，能帮我不直接操作props吗 //外部表单 export default { name: 'OutForm', template: ` {{form}} 提交表单 `, data() { return { form: { name: 'zs', activityGroup: [ { name: '活动一', region: '区域一', type: '类型一' }, { name: '活动二', region: '区域二', type: '类型二' }, ] } } }, methods: { handleSubmit() { this.$refs.outForm.validate((valid) => { if (valid) { this.$message.success("提交成功") } else { this.$message.error("表单验证失败") } }) } } } export default { name: "NestForm", template: ` 添加活动 `, props: { group: { type: Array, default() { return [] } } }, methods: { handleAdd() { this.group.push({ name: '', region: '', type: '' }) }, handleDelete(index) { this.group.splice(index, 1) } } } 感觉通过父组件的方法改外部值很麻烦呀，求大佬指教有啥巧妙方法