elementui el-dialog 作为子组件使用关闭时报错

清阿哥

欢迎来到清哥的小屋 · 记录成长与思考

今日一言

加载中…

—

小屋足迹

小屋已亮灯 1 天

从 2026-07-21 起，一点点堆起的文字与风景。

本站访客 - 总访问 -

356 字

2 分钟

elementui el-dialog 作为子组件使用关闭时报错

2021-03-23

Vue

vue.js

本文同步自 CSDN · 清阿哥，原文发布于 2021-03-23。

1. 弹窗作为子组件#

父组件通过点击事件来打开弹窗，然而，在弹窗中点击窗外之外的空白区域或者右上角叉时候一直报错:
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021032314353958.p
翻译：避免直接改变一个道具，因为当父组件重新渲染时，这个值会被覆盖。相反，使用基于道具值的数据或计算属性。正在发生突变的道具:“editVisible”

2. 原因分析#

从翻译来看，子组件中不能直接更改父组件传递过来的数据，然后就按照提示将传递过来的数据在 data 和 computed 都重新复制一遍，仍然报同样的错。

3. 解决方法#

最后通过一行代码顺利解决，在弹窗上加上方法顺利解决！
再次分析原因：
通过该方法关闭弹窗的时候，直接通过父组件来改变关闭，该方法是在关闭弹窗前的回调函数，不在子组件改变弹窗的状态就不会报错了！

1
// 父组件
2
<editDialog :edit-visible.sync="editVisible">
3
</editDialog>
4

5
// 子组件
6
<el-dialog
7
      title="我的线索"
8
      :visible.sync="editVisible"
9
      :before-close="handleClose"
10
      top="5vh"
11
      width="80%">
12
</el-dialog>
13

14
props: {
15
    editVisible: {
16
      type: Boolean,
17
      default: false
18
    },
19
};
20

21
 handleClose() {
22
    this.$emit("update:editVisible",!this.editVisible);
23
 },