Vue项目中的eventBus统一自动关闭页签的处理方法

      项目中遇到了业务审查完成后页签不关闭造成用户可能重复进行提交的隐患,如果每位同学都写自己的页签关闭,有可能漏处理或后期不好维护。 在此进行统一封装,需要时调用即可。 上操作

前期铺垫:

     eventBus共享数据使用场景: 不需要重复的解绑和绑定的场景下使用bus。主要是在要相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。下面以某种行为自动触发页签关闭功能为例:
1、首先在main.js  中进行注册:这种方式简单易懂

Vue.prototype.$Eventbus = new Vue(); //创建eventBus共享数据

   -->也可以新建一个js文件,来创建出我们的eventBus:   比较烦,后期使用还得引入,笔主不推荐:(

import Vue from 'vue';  
export default new Vue();

2、逻辑入口处处理:
//关闭页签逻辑方法,在页签处统一处理

this.$Eventbus.$on("closeTab", function (val) {
                _this.removeTab(val);  //子组件通过$on接收对应id值,满足即执行逻辑
});

3、组件封装:    
可以在例如utils.js  中进行组件封装        

Vue.prototype.$closeTab = function (routeName) {
    this.$Eventbus.$emit("closeTab", routeName);  //父组件通过$emit发送调用id
}

4、场景调用:   

this.$closeTab(this.$route.name)

PS: 非常简单,某些功能还是前期动动小脑,后期省一大堆事,系统还稳定耐cao:>   做事情要用心呐

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值