The difference between v-model and .sync modifier

In the process of daily development, v-model instructions are often used. Generally speaking, v-model instructions create two-way data binding on forms and elements, but v-model is essentially syntactic sugar. But when it comes to syntactic sugar, we have to mention another two-way binding syntactic sugar with similar functions to v-model, which is the .sync modifier. Here is a summary of the use of the two:

1. v-model


1. Function


I believe that friends who have used the vue framework will not be unfamiliar with this instruction. v-model is used for two-way binding of data on
E.g:




When we enter a certain value in the input input box, the following can directly get our input value without needing to operate the dom element to get it

2. The essence of v-model


In essence, v-model is a syntactic sugar
At present, our habitual way of writing is as follows:


But in essence the full writing:


You can also write a function after @input, and then perform assignment operations in methods.
To understand this line of code, you must first know that the input element itself has an input event, which is newly added in HTML5, similar to onchange. Whenever the content of the input box changes, the input event will be triggered, and the latest value will be passed to the transmission. Give val to complete the effect of two-way data binding.
We carefully observe the two lines of code of syntactic sugar and original syntax, and we can draw a conclusion:
When adding the v-model attribute to the element, val is used as the attribute of the element by default, and then the input event is used as the trigger event for real-time delivery of value
Note: Not all elements capable of two-way binding are input events.

3. Special usage of v-model


In general, we use v-model mainly for two-way binding of data, which can easily obtain the user's input value. But in some special cases, we can also use v-model for two-way binding of data between parent and child components. Here you need to use the relevant knowledge of parent-child value transfer:




Here we first define a father component and a son component, introduce the son component into the father component, and bind the v-model to the son component to pass values. At this point, we need to receive this value in the son component and use it:




Note: The value we receive here must be value, and other names will not work
Under normal circumstances, the parent-to-child value transfer cannot be directly modified in the child component. Here, if we directly modify this value in the child component, an error will be reported.
E.g:


error message

When we need to modify this value, we need to pass it to the parent component for modification.
This requires defining a custom event on the child component label of the parent component, and passing the value to the parent component by using the $emit('custom event name', value) method in the child component
Here we can't use custom events, because we use v-model to pass values, so we can only use input events to modify
Define an @input method in the parent component, and then set a formal parameter val to receive the passed value of the child component,


Use the $emit() method in the child component. Call the event in the parent component and pass the value


In this way, the two-way data binding effect between parent and child components can be completed, and no error will occur

2. .sync modifier


1. The role of the .sync modifier


Compared with v-model, the sync modifier is much simpler:
The .sync modifier can realize the two-way binding of the child component and the parent component, and can realize the synchronous modification of the value of the parent component by the child component.

2. The essence of the .sync modifier


// normal parent to child:


// After adding sync, parent to child:


// it is equivalent to
:a="num" @update:a="val=>num=val"
:b="num2" @update:b="val=>num2=val">

// Equivalent to one more event listener. The event name is update:a. In the callback function, the received value will be assigned to the data item bound to the property.

There is no difference between passing value and receiving and normal parent-to-child passing value. The only difference is that the event name called by $emit must be update: attribute name when the value is passed back, and no error will be reported if the event name is wrongly written. But there won't be any changes either, which requires more attention.

Summarize


The difference between .sync and v-model is
The same point: they are all syntactic sugar, which can realize two-way communication of data in parent and child components.
Difference: different formats: v-model="num", :num.sync="num"
v-model: @input + value
:num.sync: @update:num
Another thing to pay attention to is: v-model can only be used once; .sync can have multiple.

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00