v-model绑定引用类型props的属性是否合理？

Question

vue2中
假如有三个组件，父组件，子组件，和孙组件。父组件中有这么一个值

const detail = {
    input1: 111,
    child: {
        input2: 2222
    }
}

将这个值传给了子组件，子组件又传给孙组件。
子组件中有一个输入框
v-model="detail.input1"
孙组件中有一个输入框
v-model="detail.child.input2"
然后在父组件中有个保存按钮，点击保存后要将新的detail发送出去。
问题如下：
首先，这么写是不会报错，也没有警告的，数据也都正常同步。但是，毕竟这种模式违背了单向数据流的原则，所以是否不该这么写。
假如不推荐这么写，有应该用什么思路来实现上面代码的效果呢。

Answer 1

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，只是他们关注的字段不同而已。修改时也是依次向上传递，最后达到父组件的。

Answer 2

用sync修饰，vue3去除了，改成了v-model:prop的形式，具体看文档
https://v2.cn.vuejs.org/v2/guide/components-custom-events.htm...修饰符
https://cn.vuejs.org/guide/components/v-model.html#v-model-ar...