As a back-end developer, the front end is involved, but not well understood. Recently, when using components in the Vue Element UI, I found that the component that specifies whether the Dialog displays needs to add.sync to the visible property. So I went out and looked up.sync.
Understand the VUE modifier sync thoroughly
Using true two-way data binding results in a maintenance escalation when the child component needs to change the parent component’s properties. So the child component replaces the event firing with update:my-prop-name mode, in order to implement bidirectional binding between parent and child components gracefully and without being rude.
For a component like dialog, clicking on a button in the parent component changes a property in the parent component to trigger the display of the Dialog. However, the hide or close button is usually in the dialog child, so it is necessary for the child to modify the parent’s properties, and.sync is written as a syntactic sugar that makes it easier for the child to change the parent’s properties.