vue3 主动触发全局事件
时间: 2023-05-28 14:03:47 浏览: 431
在Vue组件中获取全局的点击事件方法
在 Vue3 中,可以使用 `createApp` 创建应用程序实例,并使用其 `provide` 和 `inject` 方法来实现全局事件的触发。具体实现步骤如下:
1. 创建一个事件总线实例,用于保存事件和监听器。
```javascript
const eventBus = {
events: {},
on(event, callback) {
if (!this.events[event]) {
this.events[event] = []
}
this.events[event].push(callback)
},
emit(event, ...args) {
if (this.events[event]) {
this.events[event].forEach(callback => {
callback(...args)
})
}
}
}
```
2. 在应用程序实例中使用 `provide` 方法,将事件总线实例提供给所有子组件。
```javascript
const app = createApp(App)
app.provide('eventBus', eventBus)
app.mount('#app')
```
3. 在子组件中使用 `inject` 方法,获取事件总线实例,并使用其 `on` 方法监听事件。
```javascript
export default {
inject: ['eventBus'],
mounted() {
this.eventBus.on('eventName', this.handleEvent)
},
methods: {
handleEvent(payload) {
// 处理事件
}
}
}
```
4. 在需要触发事件的地方,调用事件总线实例的 `emit` 方法。
```javascript
eventBus.emit('eventName', payload)
```
这样就可以在任何地方触发全局事件,并在任何子组件中监听和处理事件了。
阅读全文