封装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
属性,然后就会报错。