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

作者站长头像
站长
· 阅读数 22

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

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

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

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

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