Vue3笔记_mitt库(事件总线)

mitt库在vue3中的使用

Vue3移除了$on $off等自带的自定义事件相关方法，因此在vue3中他推荐我们下载mitt库来使用事件总线传递数据，其实mitt的使用方式和vue原本的自定义事件使用方式相同，所以我们不必担心学习成本！

安装mitt库

npm i mitt

使用mitt库

1. 可以在单独的文件暴露出事件总线对象

   // mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象
   /* eventbus.js */
   // 这里我们在js中暴露这个事件总线对象
   import mitt from "mitt";
   const emitter = mitt();
   export default emitter;
   

2. 在指定组件中导入并使用它！

   // 这里我们导入我们单独写的暴露事件总线对象的js
   /* About.vue */
   // 模板代码
   <button @click="sendHomeContent">send</button>  
   
   // 导入事件总线
   import emitter from "./utils/eventbus.js";  
   // methods代码
   sendHomeContent(){
       // 触发自定义总线why，并传入一个对象
        emitter.emit("why",{name:'why',age:19})
   }
   

   /* HomeContent.vue */
   
   // 导入事件总线
   import emitter from "./utils/eventbus.js";
   
   // 在创建vue实例时，注册why事件总线
   created(){
       emitter.on("why",msg=>{
           console.log("HomeContent接收到得About发送得数据了：",msg);
       });
   }
   

mitt事件总线其他用法

/* HomeContent.vue */

// 导入事件总线
import emitter from "./utils/eventbus.js";

// 在创建vue实例时，注册why事件总线
created(){
    emitter.on("why",msg=>{
     console.log("HomeContent接收到得About发送得数据了：",msg);
    });
    // emitter.on的第一个参数如果是 * 代表监听所有的事件触发！
    // 这时，回调函数的参数就会有2个，1是事件的类型，2是实际实参
    emitter.on("*",(eventType,item)=>{
     console.log(`* 监听到的事件类型是：${eventType},接收的参数为：`,item)
    })
}

总结：

1：注册并监听自定义事件

emitter.on(eventType,callback)

2：触发自定义事件

emitter.emit(eventType,params)

mitt的事件取消

1. 取消所有的mitt事件

   emitter.all.clear()
   

2. 取消指定的mitt事件

   // 需要取消指定事件的监听，需要将回调定义在外部，类似于setTimeout
   function onFoo(){}
   emitter.on('foo',onFoo) //监听
   emitter.off('foo',onFoo) //取消监听