外包资讯 newsWEB前端开发,前端外包,前端开发外包,北京前端外包公司

当前位置:主页 > 外包资讯 > 前端vue外包

vue外包开发bus.$on事件被多次绑定,前端vue外包开发eventbus被多次触发

日期:2020-01-24 / 人气:18

vue中eventbus被多次触发(vue中使用eventbus踩过的坑)【bus.$on事件被多次绑定】

问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发

 

解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on )

bus.$off("backUpLevel");

        bus.$on('backUpLevel', () => {

            if(self.ONION.length <= 1){ 

                self.jumpSubDir()

            }else{

                let len = self.ONION.length-1

                self.jumpTeamId(self.ONION[len].id,self.ONION[len].name,self.ONION[len].type)

            }

        })

 

解决办法二:注册的总线事件(Bus)要在组件销毁时(beforeDestroy/destroyed)卸载,否则会多次挂载,造成触发一次但多个响应的情况

 

beforeDestroy () {

        bus.$off("backUpLevel");

}

 

公共实例,大坑,勿踩!

网上百度千篇一律全是使用$emit来实现,但是有一个大坑没有给别人说明,开始我都按照搜索的结果进行操作,都会出现子组件$emit后父组件没有监听到函数的变化,研究了好久才发现$emit和$on的事件必须使用一个空的 Vue 实例作为中央事件总线的实例上,才能够触发。即上述代码中的EventBus。

 

eventbus.js代码:                                                                               

import Vue from 'vue'

//消息总线

export default new Vue();

 

A、B组件中引入eventbus.js文件

import EventBus from '../../EventBus.js'