vue3怎么创建一个全局事件
时间: 2023-10-19 20:08:58 浏览: 101
vue3 封装一个全局通用弹窗提示组件(利用js调用 类似于element)
5星 · 资源好评率100%
在 Vue 3 中,可以使用 `createApp()` 方法来创建应用程序实例,并使用 `provide()` 和 `inject()` 方法来实现全局事件。
具体步骤如下:
1. 创建一个全局事件的实例:
```javascript
const globalEvent = createApp({})
```
2. 在应用程序中使用 `provide()` 方法将事件实例注入到应用程序中:
```javascript
app.provide('globalEvent', globalEvent)
```
3. 在需要使用全局事件的组件中使用 `inject()` 方法将事件实例注入到组件中:
```javascript
const { globalEvent } = inject('globalEvent')
```
4. 使用 `globalEvent.$emit()` 方法触发全局事件:
```javascript
globalEvent.$emit('eventName', data)
```
5. 在需要监听全局事件的组件中使用 `globalEvent.$on()` 方法监听事件:
```javascript
globalEvent.$on('eventName', (data) => {
// 处理事件逻辑
})
```
通过以上步骤,就可以在 Vue 3 中创建一个全局事件了。
阅读全文