2025-04-26 vue2中使用 $bus

2025-04-25  本文已影响0人  半眼鱼

前言
每次使用这个技术总是忘记 每次都得百度 决定写道自己的博客里面

一、再main.js中 挂载在$bus

new Vue({ el: '#app', router, store, render: h => h(App),
    beforeCreate(){
      Vue.prototype.$bus  = this  
      // 往Vue的原型上放一个 全局事件总线 $bus(可以任意命名,但是约定俗成用$bus),
      // 在子组件VueComponent中就能调用到这个原型里的东西,因为子组件原型会往Vue的原型上面找
    }
})

AI写代码
二、使用
1.监听事件

this.$bus.$on("functionName",(params)=>{
   console.log(params)
})

2.触发事件
代码如下(示例):

this.$bus.$emit("functionName", '参数')

3.页面卸载

this.$bus.$off(['事件1','事件2'])

完成

上一篇 下一篇

猜你喜欢

热点阅读