Mitt 是一個第三方消息發(fā)布/訂閱JavaScript庫,體積極刑闵摇(壓縮后小于200字節(jié))论熙,與框架無關(guān)沛硅,Vue官方推薦使用
一眼刃、安裝依賴包
????????npm install? mitt
二、Mitt API
三摇肌、使用
方式一:創(chuàng)建一單獨文件擂红,在文件中創(chuàng)建事件總線對象并對外暴露,在使用事件總線的地方導入(比如vue組件中)
? ? ? ? 第一步:創(chuàng)建EventBus.ts 文件
? ? ? ? 第二步:在組件中導入并使用
? ? ? ? ? ? 打印結(jié)果:
方式二:全局掛載
????????vue2 中使用 Vue.prototype?將全局屬性掛載到vue的原型對象上,應用內(nèi)所有組件都可以訪問
? ? ? ? vue3 中使用?app.config.globalProperties昵骤,替代了vue2中的Vue.prototype树碱,用于注冊能夠被應用內(nèi)所有組件實例訪問到的全局屬性的對象
第一步:創(chuàng)建mitt實例并掛載到?app.config.globalProperties 上
第二步:在組件中使用
說明:
以<script setup>語法糖,在單文件組件中使用組合式 API中 this 是undefined变秦,vue3提供了 getCurrentInstance() 方法用于獲取當前組件實例成榜;
以上代碼可以正常編譯及運行,但代碼提示[ ……不存在屬性“EventBus“……]蹦玫,是因為在app.config.globalProperties?上掛載的EventBus赎婚,要進行ComponentCustomProperties接口擴展,才能獲得類型識別樱溉;ComponentCustomProperties接口?是 vue3提供的 增強組件實例類型以支持自定義全局屬性挣输,通過TypeScript 模塊擴展?來擴展的
用法:
? ? 方式一:在main.ts文件中聲明
方式二:單獨一個文件中聲明(文件名隨意)