element-ui 弹窗组件封装的步骤

封装el-dialog为一个组件我们在使用element-ui的时候，如果一个弹窗中的内容很多，那么我们经常会把这个弹窗封装成一个组件，如下：el-dialog会修改 props，并报错但是这样会有一个问题，当触发了el-dialog内部的关闭事件时， 比如点击弹窗阴影等， 它会emit事件来修改当前组件的props [visible]，由于组件不能直接修改prop属性，然后就会报错。我们新增了一个中间变量innerVisible，来拦截props [visible]的修改和获取这样在el-dialog内部修改prop[visible]的时候，我们会通过emit的方式来通知父组件，避免直接修改props。当然父组件需要加上到此为止，封装的弹窗组件已经没有问题了。