关于Vue封装el-dialog关闭对话框报错问题

项目背景：

vue2.0 el-dialog封装

最近的一个项目存在大量的弹窗form，需要封装一个dialog。

---

问题描述

修改props的dialogFormVisible报错

在封装的子组件里我写了一个closeDelDialog方法来监听关闭事件。

  <el-dialog ...
             @close="closeDelDialog"
             ...">

 props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },

    closeDelDialog(){
     this.dialogFormVisible = false
    }

当我点击右上角的关闭时，打印出以下错误：

[Vue warn]: 
Avoid mutating a prop directly since the value will be 
overwritten whenever the parent component re-renders. 
Instead, use a data or computed property based on the prop's value. 
Prop being mutated: "dialogFormVisible"

如果你的vue基础扎实，应该已经看出问题所在了

---

原因分析：

根据错误提示，我来到了Vue官网，官方是这样说的：

单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

---

解决方案：

知道了单项数据流，那这个问题就很好解决了

子组件修改closeDelDialog，通过$emit提交给父组件：

 closeDelDialog(){
      this.$emit('close');
    }

父组件v-on拿到回调：

 <DelDialog
        ...
        v-on:close="closeDelDialog"
        ...
    ></DelDialog>

    closeDelDialog(){
      this.delDialogFormVisible = false
    }

好了可以了，当我开心的打开浏览器关闭dialog时，有趣的事情来了…
What ??? 错误信息还在？

打开Vue工具，发现 dialogFormVisible 是变动了的，冷静分析，来个console.log（1）…

发现报错信息在"1"的前面，恍然大悟，让我想起了el-dialog的另一个属性：before-close！

官网是这样写的：

参数	说明	类型	可选值	默认值
before-close	关闭前的回调，会暂停 Dialog 的关闭	function(done)，done 用于关闭 Dialog	-	-

…

我学了个啥…

最终方案

子组件：

 <el-dialog 
  		...
        @close="closeDelDialog"
        :before-close="closeDelDialog">

 closeDelDialog(){
      this.$emit('close');
    }

父组件：

 <DelDialog
        ...
        v-on:close="closeDelDialog"
        ...
    ></DelDialog>

    closeDelDialog(){
      this.delDialogFormVisible = false
    }