vue中$bus.$emit、$on的用法

活宝小娜

于 2023-07-13 17:06:56 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

在Vue应用中，通过在main.js中注册全局的$bus实例，可以实现非父子组件之间的通信。发送组件使用$this.$bus.$emit触发事件并传参，而接收组件则通过$this.$bus.$on监听事件并处理参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$bus.$emit、$on 用于非父子组件之间通信

1、首先，需要在main.js中注册

Vue.prototype.$bus = new Vue();

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

2、在需要发送信息的组件中，发送事件：

this.$bus.$emit("removeActive",params) //removeActive事件名，params传递的参数

3、在需要接收信息的组件中，接收参数：

this.$bus.$on("removeActive",(params)=>{
      console.log('bbb',params);//处理传递过来的参数
 })