利用vue.sync在子组件弹窗中修改prop值控制子组件弹窗显示隐藏

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

之前写弹窗

传toggleOpen,然后子组件接收后再用计算属性生成一个值，来控制弹框的显示隐藏，关闭的时候子组件emit('close')，父组件接收后将toggleOpen赋值为false.
父组件
<dialog :toggleOpen="toggleOpen" @close="toggleOpen=false">
子组件
  <el-Dialog
      :visible.sync="toggle"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
    </el-Dialog>
    props：['toggleOpen']
     computed: {
    toggle: {
      get() {
        return this.toggleOpen;
      },
      set() { }
    },
    }
    closeDialog(){
    this.$emit('close')
    }

利用.sync修改如下

父
<dialog :visible.sync="toggle" >
子
   
    <el-Dialog
      :visible="visible"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
    </el-Dialog>
     props：['visible']
    closeDialog(){
    this.$emit('update:visible',false)
    }

代码上面间接很多good