通过二次封装dialog深入理解自定义双向绑定是怎么回事

问题描述

在使用elementUI开发，想要对dialog进行二次封装，可以实现一个类似v-model双向绑定的功能。

问题分析

v-model其实就是一个语法糖，它实际上做了两个动作：

• 绑定数据 value
• 触发输入的input事件去修改value

对于dialog来说value就相当于一个控制显示隐藏的Boolean值，然后在关闭弹框的时候通过$emit触发input返回一个固定的值 false，就可以在dialog组件上使用 v-model了。

问题解决

也可以使用.sync语法糖对value进行“双向绑定”：

// 在dialog组件handleClose中使用 'update:prop' 更新
handleClose() {
  this.$emit('update:value', false)
},