.sync 修饰符在有些情况下，我们可能需要对一个 prop 进行“双向绑定”，但是真正的双向绑定，会对父子组件通信带来

应用场景以及简介

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”，但是真正的双向绑定，会对父子组件通信带来维护上的问题，并且与vue单向数据流的思想相互违背。

.sync修饰符是对常规子组件向父组件传值模式的一种缩写

DEMO

app.vue

<template>
    <div id="app">
        <p>syncShow: {{syncShow}}</p>
        <syncModule :show.sync='syncShow'></syncModule>
        <!-- 相当于 v-bind:show='syncShow' @update:show='syncShow=$event' -->
        <button @click="syncShow = true">显示</button>
    </div>
</template>
import syncModule from '@components/sync.vue'
export default { 
    name: 'app',
    data () {
        return {
            syncShow: false
        }
    },
    components: {
       syncModule
    },
}

sync.vue

    <template>
      <div v-if="show">
        <button @click="$emit('update:show', false)">点击关闭</button>
      </div>
    </template>
    <script>
    export default {
      name: 'syncModule',
      props:{
        show: {
          type: Boolean,
          default: false
        }
      },
      data () {
        return {}
      }
    }
    </script>