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

问题描述

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

问题分析

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

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

<input type="text" :value="name" @input="name=$event.target.value">

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

问题解决

<template>
  <el-dialog
    :title="title"
    :visible.sync="value"
    :before-close="handleClose"
  >
    <slot></slot>
    <template slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    value: Boolean,
    title: {
      type: String,
      default: '提示',
    }
  },
  methods: {
    handleConfirm() {
      this.$emit('on-confirm')
    },

    handleClose() {
      this.$emit('input', false)
    }
  }
}
</script>

<Dialog v-model="show"></Dialog>

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

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

<!-- 子组件value属性使用 .sync 语法糖绑定，子组件在中使用 update:prop 来更新这个value属性绑定的isShow的值 -->
<Dialog :value.sync="isShow"></Dialog>