The [child component] in vue modifies the [parent component], the difference between sync and this.$parent

Group attachments call values from subcomponents with the sync modifier

<modal title="" :visible.sync="visible"></modal>

the value of the parent component can be repaired in this way in the child component

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

or you don"t need a modifier, you can modify

in this way.
this.$parent.visible = false;

neither of them reported an error. I read the dialog source code of elem and used the former. I want to know the difference between the two.

Jul.20,2021

the key difference is that in the second method, the state update of the parent component is completely passive, and the parent component itself is unaware of it.

imagine a situation where you are happily writing a component that has a state visible to control the visibility of the component. Then you find that you need a dialog box, so you don't want to implement it yourself, so you find a < whatever-dialog > and use it. You can't imagine that there is a sentence this.$parent.visible =. in this dialog box component. So your component unknowingly updates the status of the quilt component , which is obviously prone to problems.

Vue's one-way data flow concept, the state of a component can only be changed by the component itself and the parent component, and the child component can only submit events and let the component selectively deal with . This mechanism ensures that the component is always fully aware of its own state, so as to ensure the robustness of the code logic.


is preceded by explicit and followed by implicit. Implicitly, it can easily lead to logic confusion
ide/-sharp%E9%9A%90%E6%80%A7%E7%9A%84%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1-%E8%B0%A8%E6%85%8E%E4%BD%BF%E7%94%A8" rel=" nofollow noreferrer "> https://. Cn.vuejs.org/v2/style.

Menu