vue中【子组件】修改【父组件】，sync和this.$parent的区别

Question

组附件调用子组件传值时加上sync修饰符

<modal title="参考现有规则" :visible.sync="visible"></modal>

子组件中可以这样修复父组件的值

this.$emit('update:visible', false);

或者不需要修饰符,也可以这样修改

this.$parent.visible = false;

两者都没有报错，看了elem的dialog源码使用的是前者，想知道两者有什么区别。

Answer 1

关键的区别在于，第二种方法里父组件的状态更新是完全被动的，父组件本身并不知情。

想象一下这样一个情况：你正开心地编写一个组件，组件有一个状态 visible 用来控制组件的显隐。然后你发现你需要一个对话框，你不想自己实现于是找来一个 <whatever-dialog> 就用了起来，不成想这个对话框组件里有一句 this.$parent.visible = ...……于是你的组件在毫不知情的情况下被子组件更新了状态，这显然是容易出问题的。

Vue 的单向数据流理念下，一个组件的状态只能由组件自身和父组件改变，子组件只能提交事件并任由该组件有选择地处理，这个机制保证组件对自己的状态总是充分知情，如此才能保证代码逻辑的健壮。

Answer 2

前面是显式，后面是隐式，隐式容易导致逻辑混乱
https://cn.vuejs.org/v2/style...