关闭el-dialog的时候会触发两次close函数
时间: 2023-08-26 14:02:28 浏览: 139
关闭el-dialog的时候会触发两次close函数的原因可能是由于组件的生命周期问题。
当关闭dialog时,el-dialog组件会触发两次close事件,其中一次是在组件销毁之前,另一次是在组件销毁之后。其中第一次触发是因为el-dialog组件销毁前会先调用beforeClose函数,这个函数有一个返回值,如果返回false,则不会进行下一步的销毁操作,也就是不会进入组件销毁之后的逻辑;而如果返回true,则会触发第二次close事件,执行组件销毁之后的逻辑。
所以,关闭el-dialog会触发两次close函数是正常的行为,第一次是在销毁之前调用beforeClose函数,第二次是在销毁之后执行组件销毁之后的逻辑。用户可以根据实际需求,在close函数中进行判断处理。
相关问题
el-dialog的before-close和close区别
el-dialog的before-close和close的区别在于:
1. before-close是在dialog关闭之前触发的钩子函数,而close是在dialog关闭之后触发的钩子函数。
2. before-close可以在关闭之前进行一些操作,比如校验表单、提示用户等,如果操作成功,再调用done或者return true关闭dialog,如果操作失败,可以调用cancel或者return false取消关闭操作。而close则只是在关闭之后触发,一般用来做一些清理工作。
3. before-close可以通过传入一个回调函数来异步操作,比如发送请求等待响应后再执行关闭操作,而close则只能同步执行。
总的来说,before-close和close都是el-dialog提供的钩子函数,用来在dialog关闭前后进行一些操作,但是before-close更加灵活,可以进行异步操作和取消关闭操作。
element-plus el-dialog before-close 事件传参
当 el-dialog 即将关闭时,可以通过 before-close 事件来传递参数。在触发关闭事件之前,可以在事件回调函数中设置一个参数,然后在关闭事件的处理函数中获取该参数。
例如:
```html
<template>
<el-dialog
title="提示"
:visible.sync="visible"
:before-close="handleClose"
>
是否确定关闭?
</el-dialog>
</template>
<script>
export default {
data() {
return {
visible: false,
message: '关闭提示',
};
},
methods: {
handleClose(done) {
// 在 before-close 事件中设置一个参数
done(this.message);
},
handleConfirm(message) {
// 在关闭事件处理函数中获取参数
console.log('关闭事件处理函数', message);
this.visible = false;
},
},
};
</script>
```
在 before-close 事件的回调函数中,调用 done 函数并传递参数,该参数将作为关闭事件的处理函数的参数。在关闭事件处理函数中,可以获取该参数并进行相应的处理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)