Vue.js 是一款流行的 JavaScript 框架，它為我們提供了許多強大的功能。其中一個非常有用的功能是事件機制。Vue 提供了一種簡單的方式，讓父組件和子組件直接通信。這個功能就是 emit/dispatch。

在子組件調用 emit 函數時，這個函數會向父組件發送一個事件。可以攜帶任意數量的參數。父組件會監聽同名的事件，并在事件觸發后執行對應的方法。

// 子組件中調用 emit 函數
this.$emit('foo', 'bar', 123);
// 父組件監聽事件
<ChildComponent v-on:foo="handleFoo"></ChildComponent>
// 父組件中定義 handleFoo 方法
methods: {
handleFoo: function(arg1, arg2) {
console.log(arg1); // 'bar'
console.log(arg2); // 123
}
}

這樣，子組件就可以向父組件傳遞數據，而不需要直接修改父組件的數據。這也是一個好的實踐方式，因為它讓代碼更加清晰和可維護。

除了向父組件發送事件，emit 還可以向當前組件自身發送事件。這種方式比較少用，但也可以用來簡化代碼邏輯。

// 組件向自身發送事件
this.$emit('foo');

dispatch 和 emit 的區別在于 dispatch 主要用于向父級組件發送事件。dispatch 函數接收兩個參數，第一個參數是事件名稱，第二個參數是要攜帶的數據。

// 發送事件
this.$parent.$emit('foo', 'bar');
// 監聽事件
methods: {
handleFoo: function(data) {
console.log(data); // 'bar'
}
},
mounted: function() {
// 監聽父組件事件
this.$parent.$on('foo', this.handleFoo)
},
beforeDestroy: function() {
// 移除監聽器
this.$parent.$off('foo', this.handleFoo)
}

這樣，我們就可以在任何一個子組件中，向父組件發送事件和數據，實現組件之間的通信。