网站开发人员注意事项,电信的网做的网站移动网打不开该找电信还是移动,网站后台维护月薪多少,郑州知名网站建设服务公司mitt插件的使用 安装插件进行封装一个模块#xff0c;对外暴露一个Mitt实例使用 安装插件
官方文档
pnpm i mitt --s //我用的pnpm
或
npm i --s mitt
或
yarn add mitt进行封装一个模块#xff0c;对外暴露一个Mitt实例
1、在utils文件夹下新建mitt#xff08;例如 mitt… mitt插件的使用 安装插件进行封装一个模块对外暴露一个Mitt实例使用 安装插件
官方文档
pnpm i mitt --s //我用的pnpm
或
npm i --s mitt
或
yarn add mitt进行封装一个模块对外暴露一个Mitt实例
1、在utils文件夹下新建mitt例如 mitt.ts用于初始化并导出 mitt 实例
// src/eventBus.ts
import mitt from mitt;// 定义事件类型
type Events {someEvent: string;anotherEvent: number;// 这里可以定义其他事件类型
};// 创建一个事件总线实例
const mitter mittEvents();export default mitter;
使用
通过emit触发/on监听
//在需要传送数据的组件使用
templatedivbutton clickemitEventEmit Event/button/div
/templatescript langts setup
import { ref } from vue;
import mitter from /utils/mitt;const emitEvent () {mitter.emit(someEvent, Hello from component!);
};
/script
// 在需要接收的组件中使用
templatedivp{{ message }}/p/div
/templatescript langts setup
import { ref, onMounted, onBeforeUnmount } from vue;
import mitter from /utils/mitt;const message ref();const handleSomeEvent (payload: string) {message.value payload;
};onMounted(() {mitter.on(someEvent, handleSomeEvent);
});// 记得移除哦
onBeforeUnmount(() {mitter.off(someEvent, handleSomeEvent);
});// 或者
mitter.on(someEvent, (val: string){message.value val});
/script
