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.