vue3 事件总线 $on $emit
时间: 2023-06-30 11:24:57 浏览: 77
Vue 3 中事件总线的实现与 Vue 2 中的略有不同,Vue 3 中使用了一个新的 API `createApp` 来创建应用实例,并且将事件总线的实现抽象成了一个单独的模块 `mitt`。
要使用事件总线,在组件中需要先导入 `mitt` 模块:
```javascript
import mitt from 'mitt';
```
然后在组件中创建一个事件总线实例:
```javascript
const emitter = mitt();
```
在需要向其他组件中发送事件的地方,可以使用 `$emit` 方法:
```javascript
emitter.emit('eventName', data);
```
在需要监听事件的组件中,可以使用 `$on` 方法来监听事件:
```javascript
emitter.on('eventName', (data) => {
// 处理事件
});
```
需要注意的是,事件总线是一个全局实例,可以在不同的组件中使用。但是在使用时,需要先导入 `mitt` 模块并创建一个新的实例。
相关问题
vue $emit $on
在Vue中,$emit和$on是用于实现组件间通信的两个方法。
$emit方法用于在当前实例上触发自定义事件。它可以接收一个事件名称作为第一个参数,以及可选的附加参数。例如,通过调用`this.$emit('test', 'Hello')`来触发名为"test"的自定义事件,并传递字符串"Hello"作为参数。
$on方法用于监听当前实例上的自定义事件。它接收两个参数,第一个参数是事件名称,第二个参数是一个回调函数。当触发该事件时,回调函数会被执行,并接收所有传入事件触发函数的额外参数。例如,通过调用`this.$on('test', function(msg){ console.log(msg) })`来监听名为"test"的自定义事件,并在事件触发时打印出传递的参数。
在给定的代码示例中,`this.$EventBus`是一个在Vue原型上注册的全局事件总线对象。通过将事件总线对象分配给`Vue.prototype.$EventBus`,我们可以在不同的组件中访问和使用它。其中,`new Vue()`创建了一个Vue实例并将事件总线对象赋值给`$EventBus`。然后,我们可以在组件中使用`this.$EventBus.$emit()`触发自定义事件,以及使用`this.$EventBus.$on()`监听自定义事件。
在header组件中,通过在created生命周期钩子函数中使用`this.$EventBus.$on()`方法监听名为"changeNum"的自定义事件。当"changeNum"事件被触发时,回调函数会执行,并将传递的参数赋值给headStr属性,从而更新组件中的显示内容。
Vue3如何使用事件总线$bus
在Vue3中使用事件总线$bus,可以通过创建一个Vue实例,并将其导出作为事件总线使用。具体步骤如下:
1. 在一个新的js文件中创建一个Vue实例,例如:
```
import { createApp } from 'vue';
const app = createApp({});
export const bus = app;
```
2. 在需要使用事件总线的组件中,通过import引入上述文件,并在组件内部使用$emit方法触发事件,例如:
```
import { bus } from '@/path/to/bus.js';
// 触发事件
bus.emit('event-name', data);
```
3. 在需要监听事件的组件中,通过import引入上述文件,并在组件内部使用$on方法监听事件,例如:
```
import { bus } from '@/path/to/bus.js';
// 监听事件
bus.on('event-name', (data) => {
// 处理事件
});
```
需要注意的是,Vue3中的事件总线$bus并不是官方推荐的方式,更好的方式是使用provide/inject或vuex进行组件间通信。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)