The principle and function of sync modifier in Vue

When I was looking at other people's code a few days ago, I discovered the wonderful use of the sync modifier, and I recorded its usage and principle as follows.

In Vue, if a subcomponent wants to modify the variables of the parent component, the general approach is to bind events. The parent component passes the method of modifying the variable to the subcomponent, and the subcomponent triggers the execution of the method of modifying the variable. This method is quite satisfactory; in addition, One way is to use the sync modifier, which can reduce a lot of code.

Code example without sync modifier

Parent component:

<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子组件</h3>
    <SyncDemo :show="show" @update="update"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
  methods: {
    update(flag) {
      this.show = flag;
    },
  },
};
</script>

Subassembly:

<template>
  <div>
    <button @click="changeFlag">点击</button>
  </div>
</template>
<script>
export default {
  name: "SyncDemo",
  components: {},
  props: ["show"],
  methods: {
    changeFlag() {
      this.$emit("update", !this.show);
    },
  },
};
</script>

Click the button of the child component to control the display and hiding of the parent component "11111".

Using the sync modifier, the code will be much simpler.

Code example using sync modifier

Parent component:

<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子组件</h3>
    <SyncDemo :show.sync="show"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
};
</script>

Subassembly:

<template>
  <div>
    <button @click="changeFlag">点击</button>
  </div>
</template>
<script>
export default {
  name: "SyncDemo",
  components: {},
  props: ["show"],
  methods: {
    changeFlag() {
      this.$emit("update:show", !this.show);
    },
  },
};
</script>

You can see that after using the sync modifier, the parent component does not need to pass methods to the child components, and the parent component does not need to write methods to modify variables. At this time, clicking the button of the child component can also control the display and hiding of "11111" of the parent component.

The principle of sync modifier

When sync is not used, the update event bound to the child component in the parent component does not pass parameters. In fact, the bound event passes the $event parameter by default.

 It is worth noting here that if you are binding a native event such as clikc, $event refers to the event object. If it is a custom event, $event refers to the parameters passed when the subcomponent triggers the method. In the above example, $ event refers to the show variable.

Therefore, when the sync modifier is not used, the code of the parent component can be transformed as follows (directly assign $event to the show variable, and the parent component does not need to write another method to modify the variable):

<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子组件</h3>
    <SyncDemo :show="show" @update="show = $event"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
};
</script>

 Let’s further modify the code (specify the variables to be modified when binding the method):

     <SyncDemo :show="show" @update:show="show = $event"></SyncDemo>The syntactic sugar for this line of code is to use the sync modifier (the code becomes simpler)

    <SyncDemo :show.sync="show"></SyncDemo>

The above is a step-by-step code evolution, and finally we use the sync modifier to modify the variables of the parent component, so that we understand the principle of the sync modifier.

Now paste the explanation about sync modifiers on the Vue official website: