首先,你需要通过npm或yarn来安装mitt库。在你的项目根目录下运行以下命令: bash npm install mitt 或者 bash yarn add mitt 2. 在Vue3项目中引入mitt 在你的Vue3项目中,你可以在全局的入口文件(通常是main.js或main.ts)中引入mitt。 javascript // main.js 或 main.ts import { createApp } from 'vue...
现在的项目慢慢从 Vue2 升级到 Vue3 了,之前 Vue2 自带的中央事件总线是 EventBus,在 Vue3 中已经被移除了,官方推荐使用 Mitt 发布订阅库。在此简单记录一下 Mitt 的使用方式。 一、导入依赖 npm i mitt -D 二、全局引入 (1)/src/main.ts // 引入Mitt工具并配置为全局方法importmittfrom'mitt'app.conf...
1、新增一个mitt.ts文件: // utils/mitt.tsimportmittfrom"mitt"constemitter=mitt()exportdefaultemitter 2、mitt的api使用方法: // 订阅一个具体的事件emitter.on('foo',e=>console.log('foo',e))// 订阅所有事件emitter.on('*',(type,e)=>console.log(type,e))// 发布一个事件emitter.emit('foo'...
03、emitter.ts代码如下: //引入mittimport mitt from 'mitt'const emitter=mitt() exportdefaultemitter 04、Father.vue代码如下: <template>我是子页面1玩具:{{ toy }}玩具</template>import {ref} from"vue"; import emitter from"@/utils/emitter";//数据let toy=ref('奥特曼').mypage{background-color...
在前端项目使用的时候,我们在utils/mitt.ts中定义默认导出的mitt对象,如下代码所示。 //utils/mitt.tsimport mitt, { Emitter } from'mitt';//类型const emitter: Emitter<MittType> = mitt<MittType>();//导出exportdefaultemitter; 在其中的MittType类型,可以单独文件放置TypeScript的预定义文件目录中,如types...
在前端项目使用的时候,我们在utils/mitt.ts中定义默认导出的mitt对象,如下代码所示。 // utils/mitt.tsimport mitt, { Emitter } from 'mitt';// 类型const emitter: Emitter<MittType> = mitt<MittType>();// 导出export default emitter; 在其中的MittType类型,可以单独文件放置TypeScript的预定义文件目录中...
const emitter = mitt<Events>(); // 'e' 被推断为string类型 emitter.on("foo", (e) => { console.log(e); }); // ts error: 类型 string 的参数不能赋值给类型 'number' 的参数 emitter.emit("bar", "xx"); // ts error: otherEvent 不存在与 Events 的key中 ...
main.ts // main.tsimport{createApp}from'vue';// 引入mittimportmitt,{Emitter}from'mitt';constmitter:Emitter=mitt();constapp=createApp(App);// 加入全局变量中app.config.globalProperties.mitter=mitter;app.mount('#app'); a.vue // a.vueexport default defineComponent({ // 拿到mitter const...
npm install mitt 二、Mitt API 三、使用 方式一:创建一单独文件,在文件中创建事件总线对象并对外暴露,在使用事件总线的地方导入(比如vue组件中) 第一步:创建EventBus.ts 文件 第二步:在组件中导入并使用 打印结果: 方式二:全局挂载 vue2 中使用Vue.prototype将全局属性挂载到vue的原型对象上,应用内所有组件都...