The function of the sync modifier is that when a child component changes the value of an props, the change is synchronized to the parent component.

How does this function work?

The Vue component cannot modify the props external data, but $emit can fire events and pass parameters, and $event can get the parameters of $emit.

Let’s look at the code:

//Child.vue
<template>
  <div id="child"< button@click = > update:money < button@click ="$emit('update:money',money-100)"Pay > < span > < / span > < / button > < / div > < / template > < script >export default {

props:["money"]}; </script> <style>#child{
  border :1px solid red;
  padding:2px;
}

</style>Copy the code

Then $event gets the argument passed:

//App.vue
<template>
  <div id="app"> Parent component: I now have {{total}} <hr> //$eventGet the passed argument assigned to total <Child :money="total" v-on:update:money="total=$event"/>

 </div>
</template>

<script>
import Child from"./Child.vue";

export default {
  data() {return {
total:10000
    }
  

  },
  components: { Child:Child}
 
};
</script>

<style>
#app{
  border :2px solid blue;
  padding:2px;
}

</style>
Copy the code


Because this scenario is common, You created the.sync modifier. The code above :money=”total” V-ON :update:money=”total=$event” can be simplified to :money.sync=”total”

Here is the running animation:

To view the source code, please click

V-model is also a syntactic sugar

v-model="x"Equivalent to: value="x",@input="x=$event.target.value"Copy the code

When v-model is used on normal input

<template>
  <div>
    {{message}}
    <hr/>
    <input v-model="message" placeholder="Hello" />
  </div>
</template>

<script>
export default {
  name: "App".data() {
    return {
      message: ""}; }}; </script> <style lang="scss">
</style>Copy the code

Animation demo:



When v-Model is used on components

The parent component

<template>
    <div>
        {{price}}
        <hr/>
        <test v-model="price"/>

    </div>
</template>

<script>
    import test from './components/Test.vue';
    export default {
        components:{test},
        name: "App".data() {return{
                price:100
            }
        }
    };
</script>

<style lang="scss""> </style> Child componentCopy the code

Child components

<template>
  <div>
    <label>
      <input ref="input" :value="value"
      @input="$emit('input', $event.target.value)"// The child component fires the event, passing the input parameter to price > </label> </div> </template> <script>export default {
  name: "App",
  props: ["value"],// The child passes value to the parent, which binds value="price"
};
</script>

<style lang="scss">
</style>Copy the code

We can see from the code above that the child passes value to the parent because v-model=”price” is equivalent to: Value =”price”,@input=”price=$event.target.value”, the parent component dynamically binds value, and the input event passes the value argument to price, so we can see the following effect:







For details, see the official documentation for the vue.js modifier