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