Vue3的事件機(jī)制與Vue2類似，也是基于發(fā)布訂閱模式實(shí)現(xiàn)的。Vue3的事件機(jī)制包括事件綁定、事件派發(fā)和事件監(jiān)聽三個(gè)方面。

事件綁定

Vue3中使用v-on指令來綁定事件，例如：

<button v-on:click="handleClick">Click me</button>

在上面的例子中，按鈕點(diǎn)擊事件被綁定到了handleClick方法上。

事件派發(fā)

在Vue3中，使用$emit方法來派發(fā)事件。$emit方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是事件名稱，第二個(gè)參數(shù)是傳遞給監(jiān)聽器的數(shù)據(jù)。例如：

methods: {
handleClick() {
this.$emit('custom-event', 'hello world')
}
}

在上面的例子中，當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)派發(fā)一個(gè)名為custom-event的事件，并傳遞字符串'hello world'給監(jiān)聽器。

事件監(jiān)聽

Vue3中使用v-on指令來監(jiān)聽事件，例如：

<my-component v-on:custom-event="handleCustomEvent"></my-component>

在上面的例子中，my-component組件派發(fā)了一個(gè)名為custom-event的事件，該事件被綁定到了handleCustomEvent方法上。

自定義事件

Vue3還支持自定義事件，可以使用createApp方法的第二個(gè)參數(shù)來注冊(cè)全局自定義事件。例如：

const app = createApp({})
app.config.globalProperties.$myGlobalEvent = new mitt()

在上面的例子中，我們注冊(cè)了一個(gè)名為$myGlobalEvent的全局自定義事件。

接著，我們可以在組件中使用$myGlobalEvent來派發(fā)事件和監(jiān)聽事件。例如：

methods: {
handleClick() {
this.$myGlobalEvent.emit('custom-event', 'hello world')
}
},
created() {
this.$myGlobalEvent.on('custom-event', data => {
console.log(data)
})
}

在上面的例子中，我們?cè)诮M件的created鉤子中監(jiān)聽了$myGlobalEvent的custom-event事件，并打印接收到的數(shù)據(jù)。

總結(jié)

Vue3的事件機(jī)制與Vue2基本相同，不過Vue3的事件機(jī)制更加靈活，支持全局自定義事件。使用Vue3的事件機(jī)制可以方便地實(shí)現(xiàn)組件之間的通信。