一文帶你深入理解Vue3中的emit使用
前言
在 Vue 3 中，組件通信是開發(fā)中非常重要的一部分，其中通過 emit 實(shí)現(xiàn)父子組件通信是最常見的方式之一。emit 的作用是：子組件可以通過觸發(fā)自定義事件將數(shù)據(jù)傳遞給父組件。
一、基礎(chǔ)概念
什么是 emit？
emit 是 Vue 提供的一個(gè)方法，允許子組件通過事件觸發(fā)的方式與父組件進(jìn)行通信。父組件通過監(jiān)聽事件來響應(yīng)子組件的行為。
使用場景
- 子組件通知父組件發(fā)生了某些行為（如按鈕點(diǎn)擊）。
- 子組件向父組件傳遞數(shù)據(jù)。
二、使用方法與語法
子組件中觸發(fā)事件
在 setup 中，通過組件實(shí)例的 emit 函數(shù)觸發(fā)事件。使用 defineProps 和 defineEmits 是 Vue 3 中推薦的組合式 API 語法。
示例代碼
<!-- 子組件 -->
<script setup>
import { defineEmits } from 'vue';
// 定義觸發(fā)的事件及其數(shù)據(jù)類型
const emit = defineEmits(['update', 'delete']);
// 觸發(fā)事件
const handleUpdate = () => {
emit('update', { id: 1, name: 'Vue 3' });
};
const handleDelete = () => {
emit('delete', 1); // 觸發(fā) delete 事件，傳遞一個(gè) ID
};
</script>
<template>
<button @click="handleUpdate">更新</button>
<button @click="handleDelete">刪除</button>
</template>
父組件中監(jiān)聽事件
<!-- 父組件 -->
<script setup>
import ChildComponent from './ChildComponent.vue';
const handleUpdate = (data) => {
console.log('更新事件觸發(fā)：', data);
};
const handleDelete = (id) => {
console.log('刪除事件觸發(fā)，ID:', id);
};
</script>
<template>
<ChildComponent @update="handleUpdate" @delete="handleDelete" />
</template>
三、配合 props 實(shí)現(xiàn)完整父子通信
子組件與父組件完整通信流程
- 父組件通過 props 將數(shù)據(jù)傳遞給子組件。
- 子組件通過 emit 將事件通知給父組件。
示例代碼
<!-- 子組件 -->
<script setup>
import { defineProps, defineEmits } from 'vue';
// 定義 props 和 emit
const props = defineProps({
value: String
});
const emit = defineEmits(['input']);
// 修改輸入時(shí)觸發(fā) input 事件
const handleInput = (event) => {
emit('input', event.target.value);
};
</script>
<template>
<input :value="value" @input="handleInput" />
</template>
<!-- 父組件 -->
<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
const inputValue = ref('初始值');
const handleInput = (value) => {
inputValue.value = value;
};
</script>
<template>
<ChildComponent :value="inputValue" @input="handleInput" />
<p>父組件中的值：{{ inputValue }}</p>
</template>
四、在 TypeScript 中的類型推斷
Vue 3 的組合式 API 提供了強(qiáng)大的類型支持。通過 defineEmits 和 defineProps，可以輕松為事件添加類型約束。
示例代碼
<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
// 定義 props 類型
interface Props {
value: string;
}
// 定義 emits 類型
type Emits = {
(event: 'input', value: string): void;
(event: 'delete'): void;
};
const props = defineProps<Props>();
const emit = defineEmits<Emits>();
// 使用 emit
const handleInput = (value: string) => {
emit('input', value);
};
const handleDelete = () => {
emit('delete');
};
</script>
五、注意事項(xiàng)與最佳實(shí)踐
事件名稱統(tǒng)一采用 kebab-case 格式：
- 雖然 Vue 會自動處理大小寫，但使用
kebab-case是推薦的實(shí)踐，避免大小寫不一致的問題。
emit('update-value'); // 推薦 emit('updateValue'); // 不推薦- 雖然 Vue 會自動處理大小寫，但使用
合理規(guī)劃事件名稱：
- 避免事件名稱過于通用，確保具有上下文意義。例如，
update可以修改為update-user，使其更具描述性。
- 避免事件名稱過于通用，確保具有上下文意義。例如，
避免過度依賴
emit：- 如果父組件過多依賴子組件的事件，可能導(dǎo)致父組件的邏輯復(fù)雜度增加?？梢钥紤]使用 Vuex、Pinia 等狀態(tài)管理工具。
事件參數(shù)的結(jié)構(gòu)化：
- 如果需要傳遞多個(gè)參數(shù)，建議使用對象，這樣更容易擴(kuò)展和維護(hù)。
emit('update', { id: 1, name: 'Vue 3' }); // 推薦 emit('update', 1, 'Vue 3'); // 不推薦
六、總結(jié)
emit 是 Vue 3 中實(shí)現(xiàn)父子組件通信的核心工具，它的使用非常靈活，適合小型應(yīng)用中的局部通信。搭配 props 使用，可以實(shí)現(xiàn)完整的數(shù)據(jù)流動。
附：注意事項(xiàng)
1、事件名稱區(qū)分大小寫
Vue 3 中的事件名稱是區(qū)分大小寫的。這意味著 @update 和 @Update 是兩個(gè)不同的事件名稱。在子組件和父組件中，確保事件名稱的一致性非常重要。
2、事件參數(shù)傳遞
使用 emit 可以傳遞多個(gè)參數(shù)，這些參數(shù)將在父組件中對應(yīng)的事件處理函數(shù)中接收到，并且需要按照順序正確接收它們。
// 子組件
emit('update', 'value1', 'value2');
// 父組件
<Child @update="handleUpdate" />
<script setup>
const handleUpdate = (param1, param2) => {
console.log(param1, param2); // param1 = 'value1', param2 = 'value2'
};
</script>3、事件參數(shù)類型
在使用 TypeScript 時(shí)，defineEmits 可以定義事件和參數(shù)的類型。不僅可以提高代碼的安全性，還能在開發(fā)過程中獲得更好的類型提示。
const emit = defineEmits<{ (event: 'update', value: string): void }>();
emit('update', 'newValue'); // 正確
emit('update', 123); // 錯(cuò)誤，類型不匹配
4、確保事件已聲明
通過 defineEmits 定義子組件中的事件時(shí)，要確保所有可能觸發(fā)的事件都已聲明。未聲明的事件將無法通過 emit 觸發(fā)。
const emit = defineEmits(['update', 'delete']);
emit('update', 'newValue'); // 正確
emit('delete'); // 正確
emit('add'); // 錯(cuò)誤，未聲明 'add' 事件5、避免濫用事件
在設(shè)計(jì)組件時(shí)，盡量減少事件的種類和數(shù)量，尤其是在組件樹較為復(fù)雜時(shí)。過多的事件可能導(dǎo)致代碼難以維護(hù)和調(diào)試。
到此這篇關(guān)于Vue3中emit使用的文章就介紹到這了,更多相關(guān)Vue3中emit使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了VUE中如何實(shí)現(xiàn)阻止事件冒泡，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue 重塑數(shù)組之修改數(shù)組指定index的值操作
這篇文章主要介紹了vue 重塑數(shù)組之修改數(shù)組指定index的值操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家分享介紹了7個(gè)適用于Vue?3的高顏值UI組件庫,合理利用,又或者學(xué)習(xí)借鑒都是不錯(cuò)的選擇,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
淺談VUE單頁應(yīng)用首屏加載速度優(yōu)化方案
這篇文章主要介紹了淺談VUE單頁應(yīng)用首屏加載速度優(yōu)化方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue 子組件使用 this.$parent 無法訪問到父組件數(shù)據(jù)和方法(解決思路)
這篇文章主要介紹了Vue 子組件使用 this.$parent 無法訪問到父組件數(shù)據(jù)和方法，解決思路也很簡單，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue3+elementPlus?table中添加輸入框并提交校驗(yàn)
這篇文章主要介紹了vue3+elementPlus?table里添加輸入框并提交校驗(yàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08
解決vue2.0 element-ui中el-upload的before-upload方法返回false時(shí)submit(
這篇文章主要介紹了vue2.0 element-ui中el-upload的before-upload方法返回false時(shí)submit()不生效的解決方法，這里需要主要項(xiàng)目中用的element-ui是V1.4.3，感興趣的朋友參考下吧2018-08-08
vue2封裝webSocket的實(shí)現(xiàn)(開箱即用)
在Vue2中,可以使用WebSocket實(shí)時(shí)通信,本文主要介紹了vue2封裝webSocket的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
Vue如何實(shí)現(xiàn)利用vuex永久儲存數(shù)據(jù)
這篇文章主要介紹了Vue如何實(shí)現(xiàn)利用vuex永久儲存數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
本篇文章主要介紹了Vue中的字符串模板的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05