>[success] # $emit 1. 子組件傳遞給父組件時候，一般操作步驟如下 * 需要在子組件中定義好在某些情況下觸發的事件名稱； * 在父組件中以`v-on`的方式傳入要監聽的事件名稱，并且綁定到對應的方法中； * 在子組件中發生某個事件的時候，根據事件名稱觸發對應的事件 2. `vue3.x `比 `2.x `多一點需要像聲明`props` 一樣，也需要在`emit `屬性聲明 `emit`事件 3. 聲明形式有兩種一種是**數組形式**，一種是**對象驗證形式** >[danger] ##### 數組形式 1. 注意`emits `注冊是 `this.$emit` 中第一個參數即映射方法名  >[danger] ##### 自定義事件的參數和驗證 1. 在使用`$emit `時候會有參數傳值，如果你想對參數傳值進行校驗可以寫如下 2. 使用參數校驗形式時候 必須返回一個布爾值來指示事件是否生效 * 校驗必須index 為number 類型  * 官方案例 ~~~ app.component('custom-form', { emits: { // 沒有驗證 因為是參數校驗zzz 沒有參數因此設置null zzz: null, // 驗證 submit 事件 submit: ({ email, password }) => { if (email && password) { return true } else { console.warn('Invalid submit event payload!') return false } } }, methods: { submitForm(email, password) { this.$emit('submit', { email, password }) this.$emit('zzz') } } }) ~~~ >[danger] ##### 命名 1. HTML 中的`attribute`名是大小寫不敏感'的，所以瀏覽器會把所有**大寫字符解釋為小寫字符**,使用`DOM`中的模板時`camelCase`(駝峰命名法) 的`emit`名需要使用其等價的`kebab-case`(短橫線分隔命名) 命名； 2. 當然如果**使用的是vuecli webpack vite 等一類工具時**不存在上面問題，因為會將`vue`文件重新轉譯 >[danger] ##### 官網講解位置 [參考](https://cn.vuejs.org/guide/components/events.html)