v-model绑定引用类型props的属性是否合理?
vue2中假如有三个组件,父组件,子组件,和孙组件。父组件中有这么一个值
const detail = {
input1: 111,
child: {
input2: 2222
}
}
将这个值传给了子组件,子组件又传给孙组件。子组件中有一个输入框v-model="detail.input1"
孙组件中有一个输入框v-model="detail.child.input2"
然后在父组件中有个保存按钮,点击保存后要将新的detail
发送出去。问题如下:首先,这么写是不会报错,也没有警告的,数据也都正常同步。但是,毕竟这种模式违背了单向数据流的原则,所以是否不该这么写。假如不推荐这么写,有应该用什么思路来实现上面代码的效果呢。
回复
1个回答

test
2024-06-30
2024-03-07更新
改变 props 是一个不好的实践。在Vue官网有相关的描述,在大多数时候,你都应该在子组件中通过事件通知父组件。
https://cn.vuejs.org/guide/components/props.html#mutating-object-array-props
同时在 vue 的 eslint 规则中也有一条相关的规则,用来避免修改到 props。
https://eslint.vuejs.org/rules/no-mutating-props.html
=========================
个人觉得这样写没问题。
而且我认为也没有违反单向数据流吧,子组件和孙组件都是接收一个 detail,只是他们关注的字段不同而已。修改时也是依次向上传递,最后达到父组件的。
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容