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

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

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

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

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

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

this.$parent.visible = false;

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

回答:

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

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

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注