目錄

前言

一、基本語法

1. 子組件觸發(fā)

2. 父組件監(jiān)聽

二、?事件參數(shù)

1. 傳值

2. 接收值

三、?事件校驗

四、注意事項

---

前言

組件事件是 Vue 組件之間進行通信的一種方式。它允許一個組件觸發(fā)一個自定義事件，并且其他組件可以監(jiān)聽并響應這個事件。

一、基本語法

1. 子組件觸發(fā)

子組件觸發(fā)自定義的事件有兩種方式。

• 模板表達式中

在組件的模板表達式中，可以直接使用?$emit?方法觸發(fā)自定義事件，例如：

<!-- SonCom -->
<button @click="$emit('someEvent')">click me</button>

• <script setup> 里

顯式地通過?defineEmits()?宏來聲明它要觸發(fā)的事件。注意，defineEmits只等在<script setup>?的頂級作用域下使用，不能在別的函數(shù)里。

科普一下：在計算機編程中，宏（Macro）通常是一種預處理指令或代碼片段，用于在編譯過程之前進行文本替換和代碼生成。宏可以幫助簡化代碼編寫、提高代碼的復用性和可維護性。

然后使用defineEmits()?返回的跟模板里面的 $emit 相同作用的函數(shù)來觸發(fā)。

<script setup>
// 聲明
const emit = defineEmits(['touchFather', 'submitFather'])// 觸發(fā)
function buttonClick() {emit('touchFather')
}
</script>

• 非 <script setup> 里

事件需要通過 emits 選項來定義，emit?函數(shù)也被暴露在?setup()?的上下文對象上。

export default {emits: ['inFocus', 'submit'],setup(props, ctx) {ctx.emit('submit')}
}

2. 父組件監(jiān)聽

和Vue2一樣，父組件可以通過?v-on?(縮寫為?@) 來監(jiān)聽事件：

<SonCom @some-event="callback" />

ps：事件名可以用駝峰形式，但是在模板中是推薦使用kebab-case 形式來編寫。

二、?事件參數(shù)

如果我們需要再觸發(fā)事件的時候給父組件傳特定的值，就可以提供給 $emit 額外的參數(shù)。

1. 傳值

• 模板里傳值

<button @click="$emit('chooseA', 1)">chooseA
</button>

• script里傳值

<script setup>
// 聲明
const emit = defineEmits(['touchFather', 'submitFather'])// 觸發(fā)并傳值
function buttonClick() {emit('touchFather', num)
}
</script>

所有傳入?$emit()?或?emit() 的額外參數(shù)都會傳過去，傳參不限制個數(shù)。

2. 接收值

• 模板里接收值

<SonCom @touch-father="(num) => count = num" />

• 方法里接收值

<SonCom @touch-father="handleNum" /><script>function handleNum(num) {count.value += num}
</script>

三、?事件校驗

事件也可以像Props一樣來進行校驗。只需要將上面的數(shù)組換成對象。對象里事件被賦值為一個函數(shù)。接受的參數(shù)就是拋出事件時傳入?emit?的內(nèi)容，返回一個布爾值來表明事件是否合法。

<script setup>
const emit = defineEmits({// 沒有校驗touchFather: null,// 校驗 submitFather 事件submitFather: ({ email, password }) => {if (email && password) {return true} else {console.warn('Invalid submit event payload!')return false}}
})function submitForm(email, password) {emit('submitFather', { email, password })
}
</script>

示例：

子組件：校驗并且傳參不符合校驗規(guī)則

<template><div><button @click="submitForm">子傳父</button></div>
</template><script setup>const obj = {email: '',password: ''}const emit = defineEmits({// 沒有校驗touchFather: null,// 校驗 submitFather 事件submitFather: ({ email, password }) => {if (email && password) {return true}console.log('傳參無效!')return false}})function submitForm() {emit('submitFather', obj)}
</script>

父組件：

<template><div><ChildComponent @submit-father="handle" /></div>
</template><script setup>import ChildComponent from './ChildComponent.vue'function handle({ email, password }) {console.log('父組件——', email, password)}
</script>

運行結果：

傳參失敗，并且Vue報錯。

如果給obj值通過校驗：

<template><div><button @click="submitForm">子傳父</button></div>
</template><script setup>const obj = {email: 123,password: 123}const emit = defineEmits({// 沒有校驗touchFather: null,// 校驗 submitFather 事件submitFather: ({ email, password }) => {if (email && password) {return true}console.log('傳參無效!')return false}})function submitForm() {emit('submitFather', obj)}
</script>

結果：

四、注意事項

1.?組件觸發(fā)的事件沒有冒泡機制。

2.?如果一個原生事件的名字 (例如?click) 被定義在?emits?選項中，則監(jiān)聽器只會監(jiān)聽組件觸發(fā)的?click?事件而不會再響應原生的?click?事件。