2021-11-22 VUE3控制台出现'Unhandled error during execution of component event handler'警告解决方法

1. 如何出现‘Unhandled error during execution of component event handler’这句警告的？

页面布局大概是这样子的：

// 备注说明：暂不研究引入组件的内容

2. 如何理解这句警告 'Unhandled error during execution of component event handler'

Unhandled error during execution of component event handler 译为： 组件事件处理程序执行期间未处理的错误

操作流程：
   点击启用/禁用按钮，提示弹窗 弹出，然后点击按钮
      - 确定按钮 - 走正常业务逻辑，没有出现这个警告。
      - 取消按钮 - 界面效果： 提示弹窗消失，然后出现警告内容。

处理方法：
   就是： this.$confirm()方法未处理取消按钮触发的事件，所以就需要 catch 去捕捉这个错误即可。
  

3. 关于 this.$alert 方法 点击关闭图标触发的回调方法

点击打开alert弹窗

open(){
  this.$alert('点击了alert弹窗','标题名称',{
    confirmButtonText:'确定',
    // 
    callback: () => {
      // 点击弹窗里的 关闭图标 会触发这里的事件
      this.$message.info('点击关闭图标~~~')
    }
  })
  .then(() => {

  }).catch(()=>{

  })


  // $confirm 方法也是一样的
  this.$confirm('文本内容','弹窗标题',{
    confirmButtonText:'确定',
    cancelButtonText:'取消',
    type:'warning'
  }).then(()=>{
    // 点击确定会进这里面
    this.$message.success('操作成功')
  }).catch(()=>{
    // 点击取消会进这里面
    this.$message.info('取消成功')
  })
}