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

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

页面布局大概是这样子的：
<template>
  <div class="container">
     // 搜索栏组件
     <search />

    // table 组件
    <et-talble>
       <template #action="row">
         // 这里引入table表格中操作栏的按钮组件,假设目前只有一个 编辑, 启用/禁用 按钮
         <operation-btns 
         :row="row"
         @edit="handleEdit"
         @enable="handleEnable"
         />
       </template>
    </et-table>
  </div>
</template>
// 备注说明：暂不研究引入组件的内容
<script>
  //这里放引入组件的文件路径
  export default{
    name:'xx',
    components:{
      search,
      etTable,
      operationBtns
    },
    data(){
      return {

      }
    },
    computed:{},
    watch:{},
    created(){},
    methods:{
      // 编辑
      handleEdit(){
        
      },
      // 启用/禁用
      async handleEnable(row){
        await this.$confirm('确定要启用/禁用这条数据吗?','提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning',
        })
        .then(async ()=>{
          // 这里处理相关业务逻辑
          await requestStatusApi();
          this.$message.success('操作成功')
        })
        // 重点***，如果这里少了catch这一步，就会报警告
        .catch(()=>{})
      }
    }
  }
</script>
<style scoped lang="scss"></style>

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

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

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

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

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

<el-button type="text" @click="open">点击打开alert弹窗</el-button>

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('取消成功')
  })
}