v-model principle:
From the contact with Vue, we know that v-model is to achieve two-way data binding. What is the principle of binding?
In fact, the v-model is essentially syntactic sugar. After using the v-model, the data is bound and a @input event listener is added.
<input v-model='search' />
Equivalent to
<input :bind='search' @input='search = $event.target.value'>
When using the v-model in the input element to achieve double data binding, in fact, the input event of the element is triggered during input. Through this syntactic sugar, two-way binding of parent and child component data can also be achieved
Parent component:
Subassembly:
The data of the parent component is bound to the props property of the child component through v-bind, and the value is used by default on props, and then the event input is triggered by $ emit, because the event bound by the v-model is input, so in The input event of the parent component is triggered on the child component. By triggering the event to pass the value, the two-way binding of the parent and child component data is achieved, which is reduced compared to the direct use of v-bind and custom event code.