Vue3?$emit用法指南(含選項API、組合API及?setup?語法糖)
許多Vue模式涉及使用props將數(shù)據(jù)從父組件傳遞到子組件。但如果我們需要一個子組件將數(shù)據(jù)傳給它的父組件呢？
使用 emit，我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結構中。這對下面幾種情況很有用，如：
- 從 input 中發(fā)出數(shù)據(jù)
- 從 modal 本身內部關閉 modal
- 父組件響應子組件
Vue Emit是如何工作的？
當我們 emit 一個事件時，我們用一個或多個參數(shù)調用一個方法：
- eventName: string - 事件的名稱
- values: any - 通過事件傳遞的參數(shù)
下面是一個內聯(lián) emit的例子，<button @click="$emit('add', Math.random())">。emit一個名為add的事件，并將Math.random()的值作為參數(shù)傳遞出去。
然后，在父組件使用v-on或@指令可以監(jiān)聽我們的自定義添加事件并接收該參數(shù)值。
Child.vue
<template>
<button @click="$emit('add', Math.random())">
Add Math.random()
</button>
</template>在** Parent.vue **中監(jiān)聽：
<script setup>
import { ref } from 'vue'
const count = ref(0)
// 也可以從我們的模板中調用一個函數(shù) `<ChildComponent @add="add" />
// const add = (i) => count.value += i
</script>
<template>
<ChildComponent @add="(i) => count += i" />
<p>Count: {{ count }}</p>
</template>
每次我們點擊按鈕，Child.vue 都會 emit 一個 add 事件，并帶有一個0到1之間的隨機值。 然后，Parent.vue 捕捉到這個事件，并將這個值添加到計數(shù)中。
可以傳遞任意多的參數(shù)，監(jiān)聽器也會收到所有的參數(shù)：
- Child -
$emit('add', Math.random(), 44, 50) - Parent -
@add="(i, j, k) => count += i + j + k"
現(xiàn)在，我們知道如何在我們的模板中 emit 內聯(lián)事件，但在更復雜的例子中，如果我們從SFC的script 中 emit 一個事件會更好。特別是當我們想在 emit 事件之前執(zhí)行一些邏輯時，這很有用。
在Vue 3中，我們有2種不同的方法來做到這一點:
- 選項API -
this.$emit - 帶有
setup()的組合API -context.emit - 帶有
<script setup>的組合API -defineEmits()
我們一個一個來看。
選項API - this.$emit
在 Vue3 中，我人可以選擇使用選項API或組合API。
在選項API中，我們可以調用this.$emit來 emit一個自定義事件。
看下面這個例子在 MyTextInput.vue 中，它包含一個 label 和 input。每當 input 改變時，我們會 emit 一個事件，并將輸入的值轉成大寫作為參數(shù)傳遞出去。
我們可以不從模板中調用$emit，而是調用一個組件方法。在該方法中調用this.$emit并把我們的值傳給它。
MyTextInput.vue
<script>
export default {
methods: {
handleChange (event) {
this.$emit("customChange", event.target.value.toUpperCase())
}
}
}
</script>
<template>
<div>
<label>My Custom Input</label>
<input type="text" placeholder="Custom input!" @input="handleChange" />
</div>
</template>在 Parent.vue 中接收：
<script>
export default {
methods: {
handleChange (event) {
this.$emit("customChange", event.target.value.toUpperCase())
}
}
}
</script>
<template>
<div>
<label>My Custom Input</label>
<input type="text" placeholder="Custom input!" @input="handleChange" />
</div>
</template>
帶有setup()的組合API - context.emit
在 組合API中，如果使用setup函數(shù)，就不能在用 this,也就是不能調用this.$emit()方法了。
相反，可以使用 setup 方法中的第二個參數(shù) context 來訪問 emit 方法。我們可以用之前使用的事件名稱和值調用context.emit。
MyTextInput.vue
<script>
export default {
// can use the entire context object
setup (props, context) {
const handleChange = (event) => {
context.emit("customChange", event.target.value)
}
return {
handleChange
}
},
// or we can destructure it and get `emit`
setup (props, { emit }) {
const handleChange = (event) => {
emit("customChange", event.target.value)
}
return {
handleChange
}
}
}
</script>
<template>
<div>
<label>My Custom Input</label>
<input type="text" placeholder="Custom input!" @input="handleChange" />
</div>
</template>
在 <script setup> 中的用法
當我們使用<script setup>時，我們無法訪問組件實例或 context 上下文參數(shù)。那我們怎么獲得 emit ?
在這種情況下，我們可以使用 defineEmits:
- 指定組件要 emit 事件
- 為每個事件添加驗證信息
- 可以訪問與context.emit相同的值
在最簡單的情況下，defineEmits是一個字符串數(shù)組，每個字符串是一個事件的名稱。
MyTextInput.vue
<script setup>
const emit = defineEmits(['customChange'])
const handleChange = (event) => {
emit('customChange', event.target.value.toUpperCase())
}
</script>
然而，如果我們傳遞一個對象，我們可以為每個事件添加一個驗證器函數(shù)，我們可以在里面檢查值是否是我們所需要的格式。
像事件監(jiān)聽器一樣，驗證器接受我們傳入所有參數(shù)。
這與prop validation 類似，如果我們的驗證器返回 false，會在控制臺得到一個警告，這為我們提供了一些有用的信息。
MyTextInput.vue
<script setup>
const emit = defineEmits({
unvalidatedEvent: null, // if we want an event without validation
customChange: (s) => {
if (s && typeof s === 'string') {
return true
} else {
console.warn(`Invalid submit event payload!`)
return false
}
},
})
const handleChange = (event) => {
// no console warning
emit('customChange', event.target.value.toUpperCase())
}
onMounted(() => {
emit('customChange', 1) // not a string, warning!
})
</script>最佳實踐
使用 emits 定義自定義事件
如果我們不使用defineEmits，我們仍然可以通過export default中定義emits選項來跟蹤一個組件的自定義事件。
這對保持良好的組件文檔很重要，如果我們試圖使用一個沒有在 emits 中聲明的事件，也會從Vue那里得到錯誤。
當在 emits 選項中定義了原生事件 (如 change) 時，將使用組件中的事件替代原生事件偵聽器。
<script>
export default {
emits: ["change"] // or can pass object with validators
}
</script>
<template>
<div>
<label>My Custom Input</label>
<input
type="text"
placeholder="Custom input!"
@input='$emit("change", $event.target.value)'
/>
</div>
</template>正確的事件命令
在 vue3 中，與組件和 prop 一樣，事件名提供了自動的大小寫轉換。如果在子組件中觸發(fā)一個以 camelCase (駝峰式命名) 命名的事件，你將可以在父組件中添加一個 kebab-case (短橫線分隔命名) 的監(jiān)聽器。
然而，如果你使用的是Vue 2，事件名稱沒有自動的大小寫轉換，由于v-on指令會自動將你的事件名稱轉換為小寫，所以camelCase命名的事件不可能被監(jiān)聽到。
例如，如果我們發(fā)出了一個名為myEvent的事件，監(jiān)聽my-event將無法工作。
到此這篇關于Vue3 $emit用法指南的文章就介紹到這了,更多相關Vue3 $emit指南內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了如何基于Vue2實現(xiàn)動態(tài)折扣表格,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
vue3+echarts實現(xiàn)漸變色環(huán)形圖過程
這篇文章主要介紹了vue3+echarts實現(xiàn)漸變色環(huán)形圖過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
使用Vue+ElementUI動態(tài)生成面包屑導航教程
Vue和ElementUI都是非常流行的前端開發(fā)框架,它們可以讓我們更加便捷地開發(fā)前端應用,下面這篇文章主要給大家介紹了關于使用Vue+ElementUI動態(tài)生成面包屑導航的相關資料,需要的朋友可以參考下2023-05-05
基于better-scroll 實現(xiàn)歌詞聯(lián)動功能的代碼
BetterScroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件，BetterScroll 是使用純 JavaScript 實現(xiàn)的，這意味著它是無依賴的。本文基于better-scroll 實現(xiàn)歌詞聯(lián)動功能，感興趣的朋友跟隨小編一起看看吧2020-05-05
學習了幾天Vue之后終于迎來了第一個小案例,todoList是非常常見地一個小案例,下面這篇文章主要給大家介紹了關于使用Vue寫一個todoList事件備忘錄經典小案例的相關資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了vue+iview實現(xiàn)文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
如何用webpack4帶你實現(xiàn)一個vue的打包的項目
這篇文章主要介紹了如何用webpack4帶你實現(xiàn)一個vue的打包的項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了基于vue配置axios的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue豎向步驟條方式,具有很好的參考價值,希望對大家有所幫助,2023-12-12