First: compare the use of V-Model to master.sync
The sync function
- Implement bidirectional binding between parent and child component data, similar to v-Model.
- The categories are: there can only be one V-Model on a component, and there can be multiple.sync modifiers.
The principle of
Let’s take a look at how the V-Model works
<com1 v-model="num"></com1>
<! -- It is equivalent to -->
<com1 :value="num" @input="(val)=>this.num=val"></com1>
Copy the code
The principle of the.sync modifier
// Normal father to child:
<com1 :a="num" :b="num2"></com1>
// Add sync from father to child:
<com1 :a.sync="num" .b.sync="num2"></com1>
// It is equivalent to
<com1
:a="num" @update:a="val=>num=val"
:b="num2" @update:b="val=>num2=val"></com1>
Update :a callback assigns the received value to the data item in the property binding.
Copy the code
Example:
Conclusion:
Sync is different from the V-Model
-
Similarities: both are syntactic sugar, and both can realize two-way communication of data in parent and child components.
-
The mark:
- The format is different.
v-model="num", :num.sync="num"
- V-model: @input + value
- :num.sync: @update:num
- The V-Model can only be used once; .sync can have more than one.
- The format is different.