Vue3中怎么自定义eventbus
时间: 2024-04-30 10:22:01 浏览: 11
在Vue3中,你可以使用`mitt`库来自定义一个eventbus。`mitt`是一个小型的、快速的事件发射器,支持浏览器和Node.js环境。
首先,你需要安装`mitt`库:
```
npm install mitt
```
然后在你的代码中导入并创建一个eventbus对象:
```javascript
import mitt from 'mitt';
const eventBus = mitt();
```
现在,你可以使用`eventBus`对象来注册、触发和取消事件了。例如,注册一个事件:
```javascript
eventBus.on('myEvent', (data) => {
console.log('myEvent triggered with data:', data);
});
```
触发一个事件:
```javascript
eventBus.emit('myEvent', { message: 'Hello world!' });
```
取消一个事件:
```javascript
eventBus.off('myEvent');
```
当然,你也可以把`eventBus`对象导出,让其他组件也可以使用它。比如:
```javascript
export default {
data() {
return {
eventBus: mitt()
};
},
mounted() {
this.eventBus.on('myEvent', (data) => {
console.log('myEvent triggered with data:', data);
});
}
}
```
这样,在其他组件中就可以通过`this.eventBus`来注册、触发和取消事件了。