學習要點：
1.自定義事件
2.驗證拋出的事件
本節課我們來開始學習 Vue3.x 的組件中自定義事件的方法。
一．自定義事件
1. 系統內置的事件比如：click、change 等等，也可以自定義事件；
2. 而組件中的自定義事件，可以滿足之前無法實現的需求：更改父組件的值；
3. 由于這塊知識點比較繞，第一次學習可能會摸不招頭腦，所以，我按照步驟走一遍；
(1). 先創建兩個子組件 htmlA 和 htmlB，都用 props 加載父組件的內容；
const htmlA = {...}
const htmlB = {...}
// 父組件綁定兩個子組件
components : {
'html-a' : htmlA,
'html-b' : htmlB
},
(2). 在其中一個子組件，比如 htmlA 中定義一個自定義事件，和 props 的定義方式一樣；
// 定義子組件的自定義事件
emits : ['child-event'],
(3). 通過子組件中使用 v-on 以自定義事件去執行父組件的一個方法；
<html-a v-on:child-event="parentFn" v-bind:parent-message="message">html-a>
(4). 在子組件模板中添加一個按鈕，點擊后來執行這個自定義事件，并拋出一個值；
// button 按鈕點擊后觸發一個方法，方法里執行自定義事件，并拋值
template : `
`,
//方法
methods : {
childClick(message) {
this.$emit('child-event', message)
}
}
(5). 最后一步了：執行父組件的一個方法，并獲取子組件傳遞的值，然后更改父組件內容；
//這里是父組件的方法
methods : {
parentFn(value) {
this.message = value
console.log('子組件觸發了我~')
}
}
PS：一套流程下來，我們終于可以修改父組件的內容了；內容較繞，需要多多理清；
二．驗證拋出的事件
1. 這個和 props 用法的一樣的，具體如下：
emits : {
// 不驗證
//'child-event' : null
// 復雜驗證
'child-event' : (value) => {
if (value !== 'abc') {
console.log('驗證失敗~')
return false
} else {
return true
}
}
},
PS：文檔上，這塊內容分了兩個部分，一個是“基礎組件”，另一個是“深入組件”都有講解；
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
