vue .sync修饰符用法

vue中.sync修饰符的作用可以实现prop中的数据“双向绑定”，也就是说可以实现子组件修改更新父组件中的值，它跟v-model一样其实是一种语法糖的写法。

但是在vue中prop中的数据是单向数据流，如果在子组件中直接修改prop中的数据Vue 会在浏览器的控制台中发出警告。

有这样一个需求：父组件中有个子组件，默认不展示，父组件用一个show属性控制子组件的显示隐藏。

如果不使用.sync修饰符实现方式如下

父组件
<template>
<div>
   <child v-if="show" :show="show" @freshShow="getShow" />
</div>
</template>

<script>
import child from './child.vue'
export default {
  components: {
    child
  },
  data() {
    return {
      show: false
    };
  },
methods: {
  getShow(val) {
    this.show = val
  }
}
};

子组件
<template>
<div v-if=show"">
   这是子组件弹窗
</div>
</template>

<script>
import child from './child.vue'
export default {
  props:['show'],
  methods: {
    closeDialog() {
      this.$emit('freshShow', false); //触