在 Vue.js 框架中，組件間的通信是一個核心概念。Vue 提供了多種方式來實現父子組件間的通信，其中?$emit?是子組件向父組件發送消息的一種常用手段。在 Vue 3 中，隨著 Composition API 的引入，$emit?的使用方式也發生了一些變化，但其核心原理仍然保持不變。

一、Vue 2 中的?$emit

在 Vue 2 中，我們通常在 Vue 實例的?methods?或?computed?屬性中使用?this.$emit?來觸發一個自定義事件，并傳遞數據給父組件。例如：

vue復制代碼

	<template>
	<button @click="notifyParent">點擊通知父組件</button>
	</template>
	<script>
	export default {
	methods: {
	notifyParent() {
	this.$emit('childToParent', 'Hello from child!');
	}
	}
	}
	</script>

在這個例子中，當按鈕被點擊時，notifyParent?方法會被調用，進而通過?this.$emit?觸發一個名為?childToParent?的事件，并傳遞一個字符串?'Hello from child!'?作為參數。

二、Vue 3 中的?$emit

在 Vue 3 中，你仍然可以使用?this.$emit?在 Options API 中觸發事件，但如果你選擇使用 Composition API，那么就需要從?setup?函數的參數中獲取?emit?函數。例如：

vue復制代碼

	<template>
	<button @click="notifyParent">點擊通知父組件</button>
	</template>
	<script>
	import { defineComponent } from 'vue';
	export default defineComponent({
	setup(props, { emit }) {
	const notifyParent = () => {
	emit('childToParent', 'Hello from child!');
	};
	return { notifyParent };
	}
	});
	</script>

在這個例子中，setup?函數接收兩個參數：props?和一個包含多個實用函數的上下文對象。我們可以從這個上下文對象中解構出?emit?函數，并在?setup?函數內部使用它來觸發事件。

三、$emit?的工作原理

無論是在 Vue 2 還是 Vue 3 中，$emit?的基本工作原理都是相似的。當你在子組件中調用?$emit?函數時，Vue 會查找該組件的父組件，并查看父組件是否監聽了你觸發的事件。如果父組件監聽了該事件，那么它就會調用與該事件相關聯的回調函數，并將你傳遞的數據作為參數傳遞給這個回調函數。

這個過程是同步的，意味著一旦你調用了?$emit，父組件中的回調函數就會立即被調用。這使得?$emit?成為一種非常有效的組件間通信手段，尤其是當你需要子組件在某種情況下通知父組件時。

四、注意事項

1. 事件名：確保你觸發的事件名是唯一的，以避免與父組件中其他可能監聽的事件發生沖突。通常建議使用 kebab-case（短橫線分隔）來命名自定義事件，例如?child-to-parent?而不是?childToParent。但請注意，在模板中監聽事件時，你可以使用任何你喜歡的大小寫形式，因為 Vue 會自動將它們轉換為 kebab-case。然而，在 JavaScript 代碼中觸發或監聽事件時，你需要確保事件名的大小寫與模板中的一致。
2. 數據傳遞：你可以通過?$emit?傳遞任何類型的數據給父組件，包括基本類型、對象、數組等。但是請注意，如果你傳遞了一個對象或數組，并且在父組件中修改了這個對象或數組，那么子組件中的原始數據也會被修改，因為它們引用的是同一個內存地址。如果你不希望這種情況發生，可以考慮傳遞一個深拷貝的副本給父組件。
3. 事件監聽與解綁：在父組件中，你需要使用?v-on?或?@?指令來監聽子組件觸發的事件。當子組件被銷毀時，Vue 會自動解綁所有與該組件相關聯的事件監聽器。但是，如果你手動添加了事件監聽器（例如通過?addEventListener），那么你需要手動移除它們，以避免內存泄漏和意外行為。
4. 與?$attrs?和?$listeners?的關系：在 Vue 2 中，你可以使用?$attrs?和?$listeners?來傳遞未知的屬性和事件給子組件。然而，在 Vue 3 中，這兩個屬性已經被整合進了?v-bind?和?v-on?的新語法中。這意味著你可以更簡潔地在父組件和子組件之間傳遞屬性和事件。但是請注意，如果你顯式地定義了一個與從父組件接收的屬性或事件同名的屬性或事件，那么它將覆蓋從父組件接收的值。為了避免這種情況，你可以使用?inheritAttrs: false?選項來阻止自動綁定未知的屬性，并手動選擇你想要綁定的屬性。同時，你也可以使用?v-on="$listeners"?的語法來監聽所有從父組件傳遞下來的事件（盡管在 Vue 3 中這種需求較少見，因為你可以直接監聽具體的事件名）。但是請注意，在 Vue 3 中更推薦使用?emits?選項來明確聲明子組件可以觸發哪些事件，并在父組件中顯式地監聽這些事件。這可以提高代碼的可讀性和可維護性，并減少潛在的錯誤和混淆。同時，使用?emits?選項還可以享受更好的 TypeScript 支持和類型推斷功能（如果你在使用 TypeScript 的話）。為了與 Vue 3 的新特性保持一致并充分利用其提供的優勢功能（如 Composition API、更靈活的組件間通信方式等），建議在實際開發中優先考慮使用 Vue 3 的新特性和語法規范進行代碼編寫和組織工作。