目录一、EventBus的简介二、使用方法第一步:2种方式初始化第二步:发送事件第三步:接受事件第四步:移除事件三、全局EventBus1、注册,在main.js中2、在组件中使用&
EventBus 又称时间总线 ,理解上来讲 EventBus 机制是通知的概念,EventBus作为所有组件共享的事件中心,既可以发送事件也可以接受事件,所有组件都可以平行的接到到相对应的数据。
在项目中使用事件总线时,需要初始化一条总线,初始化的方式有两种
第一种:通过 .js 文件将总线作为模块化导入
// EventBus.js
import Vue from 'vue'
export defalut new Vue()
第二种:通过 prototype 将总线注册为全局总线,直接在main.js中初始化以下代码(推荐使用)
//main.js
Vue.prototype.bus = new Vue();
new Vue({
render: h => h(App)
...
}).$mount('#app');
在组件中引入总线文件 ,使用 EventBus.$emit(‘事件名称’,数据)进行发送数据
//导航栏组件中
//点击事件发生时发布一个事件
this.bus.$emit('even-name',args1, arg2 , ...)
//这里我们可以把点击导航的相关信息携带出去
在组件中引入总线文件 ,使用 EventBus.$on(‘emit事件名’,callback(payload1...))进行接受事件
在一个组件中某事件如果只监听一次的话,可以使用 EventBus.$once('事件名称',callBack(payload1...));
//路由显示页面中
this.bus.$on('event-name', (...args) => {
//根据参数来进行路由跳转
})
EventBus.$off('事件名', callback),只移除这个回调的监听器。
EventBus.$off('事件名'),移除该事件所有的监听器。
EventBus.$off(), 移除所有的事件监听器,注意不需要添加任何参数。
EventBus.$off('XXXXX', {}) // 移除指定事件
EventBus.$off('XXXXX') // 移除应用内所有对此事件的监听
EventBus.$off() // 移除应用内所有事件的监听
Vue.prototype.$bus = new Vue();
this.$bus.$on("sendMessage" , (msg) => {
_this.message = msg
})
this.$bus.$emit("sendMessage" , "这是从D组件中传递到兄弟组件的内容")
缺点
优点
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue中的总线机制(EventBus)解析
本文链接: https://www.lsjlt.com/news/169301.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0