The difference and usage of V-model and.sync in Vue

They have something in common: both are syntactic sugar, and both can realize two-way communication of data in parent and child components

Difference:

V-model =”sum”, :num. Sync =”sum”

Different number of bindings V-model Only one. Sync can be bound to a component or input box

V-model is the syntactic sugar of @input + value

.sync is the syntactic sugar for @update:sum

The data transfer mode of V-model between parent and child components is as follows

// Parent <template> <! <Input v-model="sum"> <! - the default is equivalent to the following line - > < Input: value = "sum" @ Input = "(value) = > {sum = value}" > < / template > / < / child components Input: value = "sum" @input="(e)=>{$emit('input',e.target.value)}"/>Copy the code

.sync passes data between parent and child components as follows

// Parent <template> <! Sync modifier, which can be used to modify attributes passed to child components, is written as follows --> <Input :foo.sync="sum"> <! It's equivalent to the following row, @update:foo="(value)=>{sum=value}"> </template> // child component this.$emit('update:foo',value)Copy the code