First of all, when I use element-ui in the dialog components found visible property when using the need to add .sync to take effect, curious mind, so look at the principles
We first create a dialog components themselves, as follows
When we click on the Close button, a warning will occur
The reason is that in VUE, the transfer of prop is a one-way downward binding, that can only be passed to the parent the child, not vice versa.
Although the demo neutron component can also be modified directly visible to close the window, but the variable is not passed to the parent component, it is not recommended to do so (if you are capricious, that parent component to get this variable is useless, then you despite the subassemblies modify, but be careful parent component will overwrite your changes when the parameters change)
Now think if we will change subcomponents tell a parent component that allows a parent component to help us achieve feasibility. That is after we notify the parent component sub-assembly operation to close the window, the answer is yes
In the VUE, the sub-assembly is done through the event to the parent component communication, this. $ Emit
We click on the Close button when the sub-assembly, calling it updates the parent component of the event, so that the parent component change this variable visible in this update event, you can achieve sub-components closed
.sync this directive is actually a syntactic sugar, when the visible property changes call to update the parent component: visible event, we will modify the above demo below
In use of the assembly, and method using sync sugar
The syntactic sugar would be extended to
As a result, visible on the realization of synchronous father and son, parent component initialization visible, sub-assemblies to call off event, the parent component update trigger event, the parent component updates visible variable update events, change subassemblies visible status
We often use the v-modal in the realization of two-way binding, it seems here, you can also use .sync, except that v-modal input trigger event is the parent component, .sync trigger the update event is the parent component