Vue事件总线：两个组件的小秘书，轻松互通有无

事件总线机制简介

Vue事件总线其实就是两个组件之间的小秘书。它能帮助他们各自独立，又能轻松愉快地互通有无。比如，你要用$on监听个什么事，然后在这块拉信号的地方用$emit，这一来一回，消息就过去了。那我们接下来就聊聊这个神奇的Vue事件总线究竟长什么样，它是怎么操作的以及该咋样灵活运用哈。

// ComponentA.vue
import EventBus from './EventBus.js';
export default {
  created() {
    EventBus.$on('custom-event', this.handleEvent);
  },
  destroyed() {
    EventBus.$off('custom-event', this.handleEvent);
  },
  methods: {
    handleEvent(payload) {
      console.log(`Received message: ${payload}`);
    }
  }
}

$on方法的使用

你知道怎么在 Vue 组件里用 created 钩子？这个钩子里，能用$on 方法监控想要的事件！不明白？拿个例子来说，如果你想监控某个事件，只需要传两个参数：事件名和你希望处理的 function。事件发生后，function 就能自动执行了，还能抓取传递过来的数据！订阅好之后，就等着事情自然发生。

告诉你，这个小技巧可以让我们给’custom-event’事件绑定$on方法，然后在事件发生时，就能立马接收到相关数据。这样一来，我们就可以和别的零件交流像好兄弟一样玩耍！

$emit方法的运用

想要让人知道你在哪儿，就用$on在那儿设个提醒；有啥大事儿要分享？用$emit来搞定！$emit这玩意儿有点神奇，第一招是说事儿，第二招是带点儿数据。只要一发消息出去，就有人接招处理，而且还能收到你捎带的数据哦～

看这边儿我们用了个叫$emit的技俩，触发了一种叫做custom-event的东东。这和传球差不多，’Hello, EventBus!’就是我们传的话。这样能让每个组件都按自己想要的方式交流，特灵活还好用！

// ComponentB.vue
import EventBus from './EventBus.js';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('custom-event', 'Hello, EventBus!');
    }
  }
}

示例应用展示

要想深入了解 Vue 里怎么用事件总线来通讯，给你举个生动形象的例子！爸爸（ParentComponent）和娃儿（ChildComponent）这俩组件之间的沟通就像这样，小孩儿（ChildComponent）按住按钮，消息就能轻松传到爸爸那边去。爸爸接收到后，就能马上告诉大家这个喜讯！

看了这例子，你就明白为啥Vue里的事件总线那么牛逼了！这玩意儿可以轻松处理好各部件间的父子互动，就像闪电侠一样，数据传输速度快得飞起。

更复杂场景下的考虑

Vue的公告板能处理些小组件之间的事儿，不过要是遇上大型项目或者棘手问题咋办？不用担心，Vuex这个神器来帮你，专管组件间状态和变化，绝对让你安心不少！

说到Vuex那可是个专为Vue.js设计的状态管理法宝！要是你做大型项目，尤其受欢迎，因为它能帮你理清各组件间的状态，找起来就方便多了，不至于一团糟。

// ParentComponent.vue

  

    
  


import EventBus from './EventBus.js';
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  mounted() {
    EventBus.$on('message', this.handleMessage);
  },
  destroyed() {
    EventBus.$off('message', this.handleMessage);
  },
  methods: {
    handleMessage(payload) {
      console.log(`Received message: ${payload}`);
    }
  }
}

// ChildComponent.vue

  

    Send Message
  


import EventBus from './EventBus.js';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello, EventBus!');
    }
  }
}

总结与展望

看完这篇文章你就能深入了解Vue上的那个叫“事件总线”是干什么用的！就是个大家互相扯犊子的地方~只要学会使用$on跟$emit两个小函数，就能轻轻松松把这个功能搞定咯。别急，咱们先来看看例子。

敲黑板！挑选合适的通讯方法太关键了，尤其是搞研发的时候。小项目什么样的凑合都成，但大项目或难题可就得靠点真本事了。像Vuex这样的状态管理神器值得一试。

别担心，我会教你怎么轻松玩转Vue.js的事件总线。这个指南，就是要帮你解决实际问题的。