vue中修饰符.sync

.sync修饰符用于简化子组件通知父元素更新传入参数这个动作的代码逻辑
父组件上代码：

<template>
  <div>
    <!--没用.sync时，就要子组件通过$emit触发自定义事件来监听-->
    <!-- <toast :showFlag="showFlag" @update:showFlag="showFlag=$event" /> -->
    <!--加了.sync, 就省去以上部分-->
    <toast :showFlag.sync="showFlag" />
  </div>
</template>
<script>
import Toast from "@/components/Toast.vue";
export default {
  data() {
    return {
      showFlag: true
    };
  },
  components: {
    Toast
  }
};
</script>

子组件Toast.vue上代码

<template>
  <div v-if="showFlag">
    Toast
    <br />
    <button @click.stop="$emit('update:showFlag',false)">关闭Toast</button>
  </div>
</template>
<script>
export default {
  props: {
    showFlag: Boolean
  }
};
</script>