Dialog组件封装 vue中子传父的关闭问题

2023-08-08 10:05| 来源: 网络整理| 查看: 265

最近在项目中需要手动封装一个dialog组件，父组件中控制dialog的显示与否，出现dialog还好说，父组件直接传值到子组件，子组件用props接收就好，但是回传的时候出现了问题，子组件中不能修改父组件传过来的值。

而我们的关闭有两种方法，一种是点击右下角的“取消”按钮，还有一种是点击右上角的关闭按钮。第一种很好处理，在点击“取消”的时候定义一个事件，把父组件的值取反传回去，（注意我只是取反，并没有修改父组件传过来的值，这样不用给子组件的data中来回赋值，代码简洁）：

//点击取消函数 closeHandler(){ this.$emit("childCloseDialog", !this.dialogVisible); }

但是在第二种情况，就是在点击关闭按钮的时候，遇到了问题，控制台一直报错，大意就是不能修改父组件传过来的数据，我纳闷了很久，我没修改啊，我只是把父组件的值取反回传，怎么点击取消按钮可以实现，点击关闭按钮就一直报错了？

原来问题出在了这里，我们在点击关闭按钮的时候，el-dialog自己内部封装了一个函数，直接修改了我们的visible，所以控制台一直报错，我们在子组件中修改了父组件的值，我仔细的查看的element的API，发现它还有个事件，就是:before-close，这个是关闭dialog之前可以做一些事情，那我们有了这个，就可以在它里面定义一个事件，要求把父组件的值取反回传，它有一个参数，是一个函数：done，这个函数确保继续执行下去，就是把dialog关闭掉，如果不执行这个done函数，那么dialog就无法关闭，我们把父组件的值取反回传以后，再判断下，visible是否是false，如果是false的话，我们就调用done函数，这样控制台就不会报错啦：

子组件： template：

12134235

js:

methods: { //关闭按钮设置函数 handleClose(done) { this.$emit("childCloseDialog", !this.dialogVisible); if (this.dialogVisible == false) { done(); } }, //点击取消函数 closeHandler(){ this.$emit("childCloseDialog", !this.dialogVisible); } },

父组件：

template:

js：

data(){ return{ dialogVisible:false, } }, computed:{ }, methods:{ openDialogHandler(){ this.dialogVisible = true }, closeDialog(value){ console.log(value) //此处回传的值是 false this.dialogVisible=value } }

这样点击关闭按钮就不会报错啦！

【本文地址】

公司简介

联系我们