vue中dialog下修改弹框的visible的值之加.sync的区别

first：使用.sync修饰符

sync 修饰符其实是个双向绑定的语法糖，一般用于“双向绑定”props的时候，类似v-model

比方说，elementui中的dialog组件，它有个prop 叫visible，在使用该组件的时候，我们希望点击dialog 右上角的x号，或者点击遮罩层，隐藏dialog。但是我们没法在子组件去直接修改父组件绑定visible属性的变量，按照规则，我们需要在dialog里$emit一个事件，然后在父组件的处理方法中去修改该值，但是这样写太麻烦了，因此，我们使用了.sync修饰符，然后约定子组件使用$emit(‘update:visible’,false)，让父组不用写处理方法就可以修改绑定visible属性的变量。

一、父标签

<template>
<div>
      <el-dialog :visible.sync="dialogVisible"></el-dialog>
<div>
</template>
<script>
export default {
      data(){
            return {
                  dialogVisible: true
            }
      }
}
</script>

二、子标签

<template>
<div @click="handleClose">
      
<div>
</template>
<script>
export default {
  methods: {
    handleClose(){
      this.$emit("update:visible", false);
    }
  }
}
</script>

second：不用.sync修饰符

一、父标签

<config-dialog
   :configVisible="configVisible"
    @DialogCancel="configVisible = false"
    @DialogOk="DialogOk"
  >

二、子标签

 <el-dialog title="选择企业" 
     :visible="addDialogVisible" 
     :close-on-click-modal="false"
     @close="handleDialogCancel"
     @open='openDialog'
     width="500px">
 </el-dialog>
 this.$emit('DialogCancel')//取消弹框
 this.$emit('DialogOk') //确定按钮执行父组件事件

链接: https://www.cnblogs.com/zhenhunfan2/p/13878939.html