The difference between sync and V-model in vue

  • The role of the sync

    • Implement data binding between parent and child components
    • You can have more than one. Sync modifier on a component
    • The working principle of
    • / / normal father the son "com1: a =" num ": b =" num2 "> < / com1 > / / plus the father the son after sync: "Com1: a.s ync =" num ". B.s ync = "num2" > < / com1 > / / it is equivalent to the < com1: a = "num" @ update: a = "val = > num = val" : b = "num2" @update:b="val=>num2=val"></com1> // update:a callback will assign the received value to the data item in the property binding.Copy the code

  • How the V-Model works

    • < com1 v - model = "num" > < / com1 > is equivalent to the < com1: value = "num" @ input = "(val) = > this. Num = val" > < / com1 >Copy the code

  • 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.