Vue .sync 父子组件“双向绑定“

写在前面，我用的vue版本是2.6，是大于2.3的。

今天在使用Vue进行父子组件传值的时候，需要父组件向子组件传值，同时子组件需要关闭父组件的弹窗，这就需要父子组件的双向绑定。这里我用到了.sync修饰符(在Vue2.3之后的.sync只是编译时的语法糖)

Vue官网解释.sync修饰符

先上代码

//父组件
<el-dialog title="修改科室信息" :visible.sync="dialogFormVisible">
      <dep-edit :department="department" :visible.sync="dialogFormVisible" @select="select"></dep-edit>
    </el-dialog>
data() {
    return {
      dialogFormVisible:false,
      department:{},
    };
  },
methods: {
    select() {
	//略
	}
}
//子组件
<div slot="footer" class="dialog-footer">
   <el-button @click="close">取 消</el-button>
   <el-button type="primary" @click="update">修改</el-button>
</div>
props: {
    department: {
      type: Object,
      default: {}
    },
},
methods: {
    close(){
      this.$emit('update:visible', false)
    },
    update(){
      this.$emit('select')
      this.$emit('update:visible', false)
    },
    
  }

再上效果

这里我用到了单向数据传递(department)、事件传递(select、visible)

1、数据传递

当你要从父组件向子组件传递数据时，在父组件中用 :department="department" 将数据传递到子组件，在子组件中用props接收该属性，即可在子组件中使用该属性数据。

2、数据传递 事件绑定=“双向绑定” .sync

在上面的代码中，我需要在子组件中改变父组件的dialogFormVisible属性的值，用于控制弹窗的关闭。

这里在父组件中使用 .sync

:visible.sync="dialogFormVisible"

上面说到，.sync只是编译时的语法糖，即编译时该写法会被扩展为

v-bind:visible="dialogFormVisible" v-on:update:visible="val=>dialogFormVisible=val"

前一个式子将数据传递给子组件，后一个式子绑定事件到组件。

这里我在子组件中没用到visible，所以就没用props接收。所以实际上我只用到了后面的事件。

然后在子组件中使用emit触发当前实例上的事件，附加参数都会传给监听器回调。

this.$emit('update:visible', false)

可以看到，我们触发的是update:visible，也就是扩展之后的事件，会将dialogFormVisible的值改变为false。

3、事件绑定

可以看到我在父组件使用子组件时写了个@select="select"（即v-on:select="select"），然后在子组件中使用this.$emit('select')即可触发该事件，与使用.sync是一样的，只不过我这里没有带参数(感兴趣的朋友可以试试带参数的写法)。

到此，正文结束。

写在后面，为了加深印象，我又试了el-dialog的visible.sync，这个是element的el-dialog组件提供的Attributes

 

 

虽然我把我的子组件的属性名也定义为visible，但是他们两者之间是没有直接关系的，如果把el-dialog的.sync修饰符去掉，会发现点击对话框右上角的X是关不掉对话框的，就是因为dialog组件无法操作父组件的visible绑定的元素。

---

以上都是本人自己的理解，可能会与真正的解答不一致，欢迎各位大佬指正。