Vue中sync修饰符的原理和作用

前几天在看别人代码时，发现了sync修饰符的妙用，特记录其用法和原理如下。

在vue中，子组件如果想修改父组件的变量，一般做法是通过绑定事件的方法，父组件向子组件传递修改变量的方法，子组件触发修改变量的方法执行，这种方式中规中矩；另一种方法是使用sync修饰符，此方法可以减少很多代码量。

不使用sync修饰符的代码示例

父组件：

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

子组件：

<template>
  <div>
    <button @click="changeFlag">点击</button>
  </div>
</template>