一文帶你深入理解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)子組件的行為。
使用場(chǎ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 會(huì)自動(dòng)處理大小寫，但使用
kebab-case是推薦的實(shí)踐，避免大小寫不一致的問題。
emit('update-value'); // 推薦 emit('updateValue'); // 不推薦- 雖然 Vue 會(huì)自動(dòng)處理大小寫，但使用
合理規(guī)劃事件名稱：
- 避免事件名稱過于通用，確保具有上下文意義。例如，
update可以修改為update-user，使其更具描述性。
- 避免事件名稱過于通用，確保具有上下文意義。例如，
避免過度依賴
emit：- 如果父組件過多依賴子組件的事件，可能導(dǎo)致父組件的邏輯復(fù)雜度增加?？梢钥紤]使用 Vuex、Pinia 等狀態(tài)管理工具。
事件參數(shù)的結(jié)構(gòu)化：
- 如果需要傳遞多個(gè)參數(shù)，建議使用對(duì)象，這樣更容易擴(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ù)流動(dòng)。
附：注意事項(xiàng)
1、事件名稱區(qū)分大小寫
Vue 3 中的事件名稱是區(qū)分大小寫的。這意味著 @update 和 @Update 是兩個(gè)不同的事件名稱。在子組件和父組件中，確保事件名稱的一致性非常重要。
2、事件參數(shù)傳遞
使用 emit 可以傳遞多個(gè)參數(shù)，這些參數(shù)將在父組件中對(duì)應(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue-cli 打包使用history模式的后端配置實(shí)例
今天小編就為大家分享一篇vue-cli 打包使用history模式的后端配置實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了v-model的基本用法解析，幫助大家更好的理解和學(xué)習(xí)vue v-model的使用方法，感興趣的朋友可以了解下2020-10-10
electron-vue利用webpack打包實(shí)現(xiàn)多頁(yè)面的入口文件問題
項(xiàng)目需要在electron的項(xiàng)目中新打開一個(gè)窗口，利用webpack作為靜態(tài)資源打包器，發(fā)現(xiàn)在webpack中可以設(shè)置多頁(yè)面的入口，今天來講一下我在electron中利用webpack建立多頁(yè)面入口的踩坑經(jīng)驗(yàn),需要的朋友可以參考下2019-05-05
vue el-table字段點(diǎn)擊出現(xiàn)el-input輸入框,失焦保存方式
這篇文章主要介紹了vue el-table字段點(diǎn)擊出現(xiàn)el-input輸入框,失焦保存方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
最近有個(gè)需求，一個(gè)列表上下移動(dòng)要有簡(jiǎn)單過渡效果。本文通過實(shí)例代碼給大家介紹Vue 列表上下過渡效果,需要的朋友可以參考下2019-06-06
本文主要介紹了VUE中Non-Props屬性的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue+axios+element ui 實(shí)現(xiàn)全局loading加載示例
今天小編就為大家分享一篇vue+axios+element ui 實(shí)現(xiàn)全局loading加載示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Element-UI 解決el-table中圖片懸浮被遮擋問題小結(jié)
在開發(fā)中,發(fā)現(xiàn)element-ui在el-table中添加圖片懸浮顯示時(shí),會(huì)被單元格遮擋的問題,對(duì)于此問題解決其實(shí)也并不難,將懸浮圖片放在body節(jié)點(diǎn)下,通過定位顯示即可,感興趣的朋友跟隨小編一起看看吧2024-06-06
今天小編就為大家分享一篇Vue最新防抖方案(必看篇)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10