el-dialog作为子组件使用(关闭报错解决方法）

一、通过父子组件传值来实现关闭

el-dialog作为子组件使用时，关闭对话窗的时候会出现各种错误，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误：

[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: "visible"

二、通过vueX来实现关闭

由于上面的方法出错，于是又想到了另一种解决办法，通过VueX全局变量来控制显示与否，但还是会报错，

Cannot read property ‘$store’ of null

总结

总结原因就是，子组件的关闭事件和父组件的关闭事件相冲突了，子组件的可见性要由父组件来控制，不能直接修改visible的值，

通过设置 :befor-close 来规避这一问题，从而解决问题

before-close为关闭弹窗前的回调函数，在操作改变子组件关闭事件之前先调用父组件的关闭事件，就不会再报错了

父组件

子组件

更多解决办法，参考 https://www.cnblogs.com/yeqrblog/p/9141701.html