Vue中$bus事件总线

不说废话,直接看用法:

1、在 main.js 中将 $bus 绑定到 vue 原型上

Vue.prototype.$bus=new Vue()

2、在需要传递信息的组件上将一个方法发射出去,并需要在某个条件激活这个方法

<div @click="busclick"> </div>
methods(){
busclick(){
this.$bus.$emit('busfunction')
}
}

3、在组件的创建时 created 中接收 emit 的方法,并执行回调函数

created(){
this.$bus.$on('busfunction',()=>{
 this.$refs.scroll.refresh()
})
}
}

4、在 beforeDestroy 里销毁事件总线,不销毁的话会一直叠加的调用这个方法,如果这个子组件在不同的页面都调用这个子组件,那么在一个父组件 this.bus.off("busfunction"); 会把其他附件也销毁,如果只单独销毁一个父组件,那么需要在后面指定调用函数 this.bus.off("busfunction",callback());

beforDestroy(){
         this.$bus.$off("busfunction");  //当这个组件销毁的时候bus也跟着一起销毁
}.
  beforDestroy(){
         this.$bus.$off("busfunction",callback());  //当这个组件销毁的时候bus也跟着一起销毁
}

注意:
如果组件中使用 keep-alive 缓存组件,beforeDestroy 生命周期会不能使用,那么需要在keep-alive 生命周期 deactivated 中销毁事件总线

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值