Vue3 mitt 史上最全使用指南,没有之一

一、安装 mitt

sql 复制代码
bashCopy Code
npm install mitt  # ‌:ml-citation{ref="1,2" data="citationList"}
pnpm install mitt # ‌:ml-citation{ref="2" data="citationList"}
yarn add mitt     # ‌:ml-citation{ref="3" data="citationList"}

二、基本使用方式

  1. 局部使用(单文件内)

    • 创建事件总线实例:

      ruby 复制代码
      javascriptCopy Code
      import mitt from 'mitt';
      const emitter = mitt();  // ‌:ml-citation{ref="2,3" data="citationList"}
    • 触发事件

      ruby 复制代码
      javascriptCopy Code
      emitter.emit('eventName', data);  // ‌:ml-citation{ref="1,2" data="citationList"}
    • 监听事件

      ruby 复制代码
      javascriptCopy Code
      emitter.on('eventName', (data) => {
        console.log('接收数据:', data);
      });  // ‌:ml-citation{ref="1,2" data="citationList"}
  2. 全局使用(跨组件通信)

    • main.ts 中注册全局事件总线:

      ini 复制代码
      typescriptCopy Code
      import { createApp } from 'vue';
      import mitt from 'mitt';
      const app = createApp(App);
      app.config.globalProperties.emitter = mitt();  // ‌:ml-citation{ref="6,7" data="citationList"}
      app.mount('#app');
    • 在组件中通过全局属性调用:

      ruby 复制代码
      typescriptCopy Code
      import { getCurrentInstance } from 'vue';
      const { emitter } = getCurrentInstance()!.appContext.config.globalProperties;  // ‌:ml-citation{ref="2,7" data="citationList"}

三、事件监听与移除

操作 代码示例 作用说明
移除单个事件监听 emitter.off('eventName') 解绑指定事件‌
清空所有事件监听 emitter.all.clear() 移除所有监听‌
批量监听/移除 结合 emitter.onemitter.off 实现 动态管理事件‌

四、使用场景示例

  1. 组件间数据传递

    • 子组件触发事件:

      css 复制代码
      vueCopy Code
      <button @click="emitter.emit('send-data', { id: 1 })">发送数据</button>  // ‌:ml-citation{ref="5,8" data="citationList"}
    • 父组件监听事件:

      ruby 复制代码
      javascriptCopy Code
      emitter.on('send-data', (data) => {
        console.log('接收子组件数据:', data);
      });  // ‌:ml-citation{ref="5,8" data="citationList"}
  2. 跨层级组件通信

    • 非父子组件通过全局 emitter 实现交互,无需逐层传递 props‌。

五、注意事项

  1. 避免内存泄漏

    • 组件销毁时需手动移除事件监听(如在 onUnmounted 生命周期中调用 emitter.off)‌。
  2. 事件命名规范

    • 使用唯一且明确的事件名称,防止命名冲突‌。
  3. TypeScript 支持

    • 全局使用时需扩展 ComponentCustomProperties 类型声明‌。

完整代码示例

typescript 复制代码
typescriptCopy Code
// 全局注册(main.ts)
import { createApp } from 'vue';
import mitt from 'mitt';
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    emitter: ReturnType<typeof mitt>;
  }
}
const app = createApp(App);
app.config.globalProperties.emitter = mitt();  // ‌:ml-citation{ref="7" data="citationList"}
app.mount('#app');

// 组件中使用
import { getCurrentInstance } from 'vue';
const { emitter } = getCurrentInstance()!.appContext.config.globalProperties;

// 触发事件
emitter.emit('update-list', { items: [1, 2, 3] });  // ‌:ml-citation{ref="1,2" data="citationList"}

// 监听事件
emitter.on('update-list', (data) => {
  console.log('列表更新:', data);
});  // ‌:ml-citation{ref="2,3" data="citationList"}

// 销毁时移除监听
onUnmounted(() => {
  emitter.off('update-list');  // ‌:ml-citation{ref="2,3" data="citationList"}
});
相关推荐
像风一样自由202028 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理1 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
袁煦丞3 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作