Vue2 .sync修饰符的应用

---

前言

Vue2 .sync修饰符的使用.

---

一、场景

经常遇到需要关闭各种弹窗的情况, 基于Element的话, 基本就是大量监听close事件, 常用的做法是用一个visible属性来使父子组件建立联系, 控制作为子组件的弹窗的显示隐藏, 那么必然要面临父子组件内visible的同步问题.

你不能让父组件内的visible受到事件影响变为true的情况下, 子组件弹窗里直接控制el-dialog显隐的visible属性依旧是false吧?
同理弹窗关闭后子组件也需要向父组件同步visible为false, 两边始终保持一致才好.

我刚开始给出的思路比较简单, 在我不知道这个修饰符的情况下.
就是用props和$emit, 对, 就这样互相传, 子组件有关闭事件就向父组件$emit传值来同步.

原始基本是这样, 可以跑一下:

<!-- 子组件son -->
<template>
  <div class="son" v-show="nowVisible">
    <p>{
  { nowVisible }}</p>
    <button @click="closeSon">click to close son</button>
  </div>
</template>
<script>
export default {
     
  name: 'son',
  props: {
     
    visible: {
     
      type: Boolean,
      default: () => false
    }
  },
  data() {
     
	dialogVisible: this.visible
  },
  watch: {
     
    visible: {
     
      handler(newVal) {
     
        this.nowVisible = newVal;
      },
    },
  },
  methods: {
     
	closeSon() {
     
	  this.$emit('closeSon', false);
	}
  }
}
</script>

<!-- 父组件fa -->
<template>
  <div class="fa">
    <button</