vue 3 mitt的用法
时间: 2023-12-16 17:56:10 浏览: 150
vue3 devtools 版本6.5.0
5星 · 资源好评率100%
Vue 3 Mitt是一个简单的事件总线库,用于在Vue 3应用程序中进行组件间通信。以下是Vue 3 Mitt的用法:
1. 安装mitt
你可以使用npm或yarn安装mitt:
```
npm install mitt
```
或者
```
yarn add mitt
```
2. 在Vue应用程序中使用mitt
在Vue 3应用程序中,可以在main.js文件中导入mitt:
```javascript
import mitt from 'mitt';
const emitter = mitt();
const app = createApp(App);
app.config.globalProperties.$mitt = emitter;
app.mount('#app');
```
在上面的代码中,我们首先导入mitt,然后创建一个emitter实例,并将其添加到Vue实例的全局属性中。这样,在整个应用程序中,我们都可以使用$mitt来访问事件总线。
3. 在组件中使用mitt
在组件中,我们可以使用$mitt来触发事件和监听事件。例如:
```javascript
export default {
methods: {
handleClick() {
this.$mitt.emit('my-event', { message: 'Hello World!' });
}
},
mounted() {
this.$mitt.on('my-event', (payload) => {
console.log(payload.message);
});
}
}
```
在上面的代码中,我们在组件的方法中使用$mitt来触发一个名为“my-event”的事件,并向事件处理程序传递一个包含“message”属性的对象。在组件的mounted钩子中,我们使用$mitt来注册一个名为“my-event”的事件处理程序,当该事件被触发时,控制台将输出“Hello World!”。
总之,Vue 3 Mitt是一个非常简单易用的事件总线库,可以帮助我们在Vue 3应用程序中进行组件间通信。
阅读全文