项目中遇到了业务审查完成后页签不关闭造成用户可能重复进行提交的隐患,如果每位同学都写自己的页签关闭,有可能漏处理或后期不好维护。 在此进行统一封装,需要时调用即可。 上操作
前期铺垫:
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:> 做事情要用心呐