如何将element-ui弹窗组件封装成长尾关键词？

本文共计709个文字，预计阅读时间需要3分钟。

封装el-dialog为一个组件 + 当我们在使用element-ui时，如果弹窗中的内容很多，那么我们经常会把这个弹窗封装成一个组件，如下所示：!--DetailDialog.vue--template

封装el-dialog为一个组件

我们在使用element-ui的时候，如果一个弹窗中的内容很多，那么我们经常会把这个弹窗封装成一个组件，如下：

<!-- DetailDialog.vue html --> <template> <el-dialog title="标题" :visible.sync="visible" width="720px" > <p>弹窗内容</p> </el-dialog> </template>

// DetailDialog.vue js <script> props: { visible: { type: Boolean, default: false } } </script>

el-dialog会修改 props，并报错

但是这样会有一个问题，当触发了el-dialog内部的关闭事件时， 比如点击弹窗阴影等， 它会emit事件来修改当前组件的props [visible]，由于组件不能直接修改prop属性，然后就会报错。