首页 > TAG信息列表 > mitt
一天一个知识点-----vue3 中简单实现 vue2的bus总线
项目背景：vue3 众所周知在重构的vue3后，vue2的bus总线通信就随之无法使用。 bus总线有点像 Vuex 或者 Pinia ，可以使用发布订阅模式来简单实现下。 不是很了解的同学可以 ♥ 观察者模式浅尝♥ ♥ 发布订阅模式浅尝♥ 原理分析： 参照发布订阅模式 需要一个list来存放相应的事件 $on 方vue3+ts使用bus事件总线
1、在vue2中我是这样使用的 //创建一个vueBus.jsimport Bus from 'vue';let install = function (Vue) { Vue.prototype.$bus = new Bus()} export default { install}; //在main.js中引入import vueBus from '@/utils/vueBus';Vue.use(vueBus);//可根据this.$bus._events[&vue3使用mitt实现组件通信
创建vue3项目 npm install -g @vue/cli vue create myproject(项目名) 安装mitt npm install --save mitt全局绑定 在 main.js引入 import mitt from 'mitt';app.config.globalProperties.mittBus = mitt() <template> <button @click="submit">mittvue3定义全局变量方法变更及$on废弃
在vue2中，直接 Vue.prototype.$bus = new Vue() 但是在vue3中，方法改变了（因为$on方法的废弃，需要用到mitt） const app = createApp(App) app.config.globalProperties.$bus = new mitt(); app.use(store).use(router).mount('#app') 则使用$bus.emit去提交 然后使用$bus.onvue.js3:用mitt发送接收事件消息(vue@3.2.6 / mitt@3.0.0)
一，安装mitt库： 1,安装 liuhongdi@lhdpc:/data/vue/storeweb$ npm install -S mitt 2,查看安装后的版本: liuhongdi@lhdpc:/data/vue/storeweb$ npm list mitt storeweb@0.1.0 /data/vue/storeweb ├─┬ element-plus@1.1.0-beta.7 │ └── mitt@2.1.0 └── mitt@3.0.0