西安做网站的公司有,网站建设公司株洲,上海上咨建设工程咨询有限公司,网站建设规划方案包括中央事件bus的使用
使用场景#xff1a;当需要传递给多个组件的时候例如父组件-子组件-孙组件#xff0c;甚至还得传递到更深的组件的时候中央事件就起到了作用#xff0c;不需要一直传递。bus其实就是一个发布订阅模式#xff0c;利用vue的自定义事件机制
// 事…中央事件bus的使用
使用场景当需要传递给多个组件的时候例如父组件-子组件-孙组件甚至还得传递到更深的组件的时候中央事件就起到了作用不需要一直传递。bus其实就是一个发布订阅模式利用vue的自定义事件机制
// 事件总线class EventBus {// 事件总线类构造器constructor() {// 收集订阅信息,调度中心this.list {};}/*** 订阅事件* param {string} name - 事件名称* param {function} callback - 事件回调函数*/on(name, callback) {this.list[name] this.list[name] || [];this.list[name].push(callback);}/*** 发布事件* param {string} name - 事件名称* param {any} data - 载荷传入订阅时绑定的事件回调函数中的数据*/emit(name, data) {if (this.list[name]) {this.list[name].forEach((callback) {callback(data);});}}/*** 取消订阅事件* param {string} name - 事件名称*/off(name) {if (this.list[name]) {delete this.list[name];}}
}
//export default EventBus;// 实例化事件总线对象
const eventBus new EventBus();export default eventBus;在需要的文件引入
例如 在A页面点击或者其他操作的时候通过触发发布事件把参数传到目的文件 B/C/D/E或者更多的文件
// A文件页面
el-button clickhandleClick/el-buttonimport bus from ./eventBus;handleClick() {bus.$emit(getBus, {text: 测试数据})// 在B页面或者其他页面bus.$on(getBus, (val) { console.log(获取测试数据, val);});}// 在下次调用之前需要先取消订阅// 在这个钩子函数处理beforeDestroy() {bus.$off(getBus)
}
