vue组件中的.sync修饰符使用

.sync是vue中用于实现简单的“双向绑定”的语法糖，在平时的开发中是经常使用的。
在vue的组件通信props中，一般情况下，数据都是单向的，子组件不会更改父组件的值，那么vue提供.sync作为双向传递的关键字，实现了父组件的变动会传递给子组件，而子组件的show改变时，通过事件机制，修改父组件的show。完成了子组件show和父组件show的双向映射。

// 父级中调用子组件
<son :show.sync="show"></son>

//当子组件需要更新 show 的值时，它需要显式地触发一个更新事件：
this.$emit('update:show', false)

示例

//父组件
<template>
  <div class="father">
    <div>父组件</div>
    <son :show.sync="show"></son>
    <button @click="changeValue">toggle</button>
  </div>
</template>
<script>
import son from "../components/address";
export default {
  data() {
    return {
      show: false, //地址组件显示隐藏
    };
  },
  methods: {
    changeValue() {
      this.show = true;
    },
  },
  mounted() {},
  components: {
    son,
  },
};
</script>

//子组件
<template>
  <div class="son" v-show="show">
    <div>我是子组件</div>
    <button @click="close">关闭</button>
  </div>
</template>
<script>
export default {
  props: ["show"],
  methods: {
    close() {
      this.$emit('update:show', false)
    },
  },
};
</script>