The sync modifier is a syntactic sugar that can be used when writing code that changes data in a parent component.

This line of code

<comp :foo.sync="bar"></comp>
Copy the code

Equivalent to the following line of code

<comp :foo="bar" @update:foo=" bar = val"></comp>
Copy the code

When a child component needs to update the value of foo, it needs to explicitly fire an update event:

this.$emit('update:foo', newValue)
Copy the code

When you need to listen on multiple prop values at the same time

<comp v-bind.sync="bar"></comp> where bar is an object suppose bar is {value1:1,value2:2}Copy the code

In HTML

<comp v-bind.sync="bar"></comp>
Copy the code

Subcomponent props

props:["value1",value2]
Copy the code

Child components trigger update writing

this.$emit("update:value1", newValue)
this.$emit("update:value2", newValue)Copy the code