vue3 怎么注册和使用全局事件

Vue3 中可以使用 `Vue.observable` 函数将一个普通的 JavaScript 对象转换成响应式对象。然后就可以在组件内使用 $on 和 $emit 方法来注册和触发全局事件。

例如，在 main.js 文件中，我们可以这样创建一个全局事件对象：

import { createApp } from 'vue'

const app = createApp()

const globalEvent = app.observable({
  event: '',
  payload: null
})

app.config.globalProperties.$event = globalEvent

然后在任意组件中就可以这样使用全局事件：

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // 注册全局事件
      $event.$on('eventName', (payload) => {
        console.log(payload)
      })
    })

    // 触发全局事件
    const triggerEvent = () => {
      $event.$emit('eventName', 'some payload')
    }

    return {
      triggerEvent
    }
  }
}

在 Vue3 中，你还可以使用 `app.config.globalProperties` 属性来定义全局属性，这样就可以在任意组件中通过 `this` 来访问这些属性了。

例如，在 main.js 中：

app.config.globalProperties.myGlobalProperty = 'hello'

在组件中：

export default {
  setup() {
    console.log(this.myGlobalProperty) // 'hello'
  }
}