vue sync修饰符的使用

1.主要用途：因组件内无法直接修改prop属性，要想改变prop常规做法需要emit通知父组件修改，sync提供了一种糖语法简写方式，可自动修改prop属性无需在父组件内监听emit事件做响应修改

2.常用例子：弹窗的显示关闭控制

3.使用方法提炼： xxx.sync, $emit(‘update:xxx’); （其中xxx为prop属性）

下面以popup弹窗为例子：

实现点击黑色空白区域自动关闭

子组件popup.vue

<template>
  <div v-show="show" class="popup" @click.stop="handleClose">
      <div class="content" @click.stop>
          <slot></slot>
      </div>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      //是否显示
      type: Boolean,
      default: false,
    },
  },
  methods:{
      //关闭
      handleClose(){
        this.$emit('update:show',false)
      }
  }
};

父组件parent.vue

<template>
  <div id="app">
     <popup :show.sync="show"></popup>
  </div>
</template>