Vue 3全局事件是什么呢？它是指在Vue 3應用程序中，我們可以在任意組件中使用$emit和$on方法來創建和監聽全局事件。

在Vue 3中，對全局事件的支持得到了改進，并且可以更方便地使用。我們不需要再手動將$emit和$on方法附加到Vue實例或原型中，而是可以通過應用程序實例上的新方法進行注冊和監聽。

要使用全局事件，我們只需在應用程序實例上調用$on方法。以下是使用全局事件的示例:

const app = createApp(App)
app.config.globalProperties.$bus = new Vue()
app.mount('#app')

在上述代碼中，我們創建了應用程序實例并將其掛載到HTML元素上。在創建應用程序實例后，我們通過調用config.globalProperties對象來添加$bus屬性，該屬性包含了新的Vue實例。

我們可以使用$emit方法在任意組件中觸發事件。以下是使用全局事件的示例:

export default {
methods: {
onClick() {
this.$bus.emit('example-event', 'event payload')
}
}
}

在上述代碼中，我們在單擊按鈕時會激活一個example-event事件，并傳遞字符串'event payload' 作為參數。事件名稱可以是任何字符串。事件名是大小寫敏感的。

我們還可以使用$on方法在全局范圍內監聽事件，如下所示:

export default {
created() {
this.$bus.on('example-event', payload =>{
console.log(payload)
})
}
}

在上述代碼中，我們通過在各自的組件中調用$bus實例的$on方法來監聽名為“example-event”的事件。此處的payload參數是在組件中觸發事件時傳遞的數據。

值得注意的是，在組件銷毀時，我們必須手動注銷事件監聽器，以避免內存泄漏。我們可以使用$off方法來取消事件監聽器。如下所示:

export default {
created() {
this.$bus.on('example-event', payload =>{
console.log(payload)
})
},
destroyed() {
this.$bus.off('example-event')
}
}

在上述代碼中，我們在created鉤子中注冊了監聽器，而在destroyed鉤子中注銷了它。這樣我們就可以安全地在Vue 3中使用全局事件了。