biubiuuuuu

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) } } } 感觉通过父组件的方法改外部值很麻烦呀，求大佬指教有啥巧妙方法

代码大师

[Vue]父组件A通过props传入子组件B一个函数f，子组件B想要执行f(null,B的一个data)，并判断f中是否用到了第一个参数，如果用到了，再将f通过props传入孙组件C？

[Vue]父组件A通过props传入子组件B一个函数f，子组件B想要执行f(null,B的一个data)，并判断f中是否用到了第一个参数（通过try catch），如果用到了，再将f通过props传入孙组件C；否则将执行结果传入C？ 父组件A中： data() { return { f(p1, p2) } } 子组件B中： computed: { B_f(){ if 没有用到C的data return f(null, 自己的一个data){...} else return f } } 孙组件C中： ...C_f... computed: { C_f(){ return f(自己的一个data){...} } } 目的是 1在组件A里定义一个函数f(参数1为子组件B的一个data，参数2为孙组件C的一个data) 2不能修改孙组件C的代码 这个逻辑看着有点别扭，有什么更好的实现方式