How to use Vue component communication Bus

This time I will bring you how to use the Vue component communication Bus. What are the precautions when using the Vue component communication Bus. The following is a practical case, let's take a look.

$dispatch and $broadcast have been deprecated in vue2.0. The explanation given in the official documentation is:

Because the event flow method based on the component tree structure is really difficult to understand, and will become more and more fragile as the component structure expands. This event method is really not good, and we don’t want to cause developers too much pain in the future. And $dispatch and $broadcast do not solve the communication problem between sibling components.

The officially recommended status management solution is Vuex. However, if the project is not very large and the status management is not very complicated, using Vuex will feel like killing a chicken with a knife. Of course, this should be based on your own needs and is just a suggestion.

In fact, there is still a demo about this non-parent-child component communication. It is hidden in the migration documents of $dispatch and $broadcast. Interested friends can click to view it. The suggestions in the document are:

The simplest way to upgrade $dispatch and $broadcast is to use event hubs to allow components to communicate freely, no matter where they are in the component tree. Since Vue instances implement an event dispatch interface, you can achieve this by instantiating an empty Vue instance. This centralized eventMiddleware
is Bus. I am used to defining bus globally: app.js

var eventBus = {
 install(Vue,options) {
  Vue.prototype.$bus = vue
 }
};
Vue.use(eventBus);

Then in the component, you can use $emit, $on, $off to distribute, monitor, and cancel listening events respectively:

Components that distribute events

// ...
methods: {
 todo: function () {
 this.$bus.$emit('todoSth', params); //params是传递的参数
 //...
 }
}

Monitoring component

// ...
created() {
 this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作
  //todo something
 })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('todoSth');
},

If you need to monitor multiple components, you only need to change the eventName of the bus:

// ...
created() {
 this.$bus.$on('firstTodo', this.firstTodo);
 this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
 this.$bus.$off('firstTodo', this.firstTodo);
 this.$bus.$off('secondTodo', this.secondTodo);
},

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How does the swiper plug-in switch arrow buttons

How does vue swiper implement the sidebar menu

The above is the detailed content of How to use Vue component communication Bus. For more information, please follow other related articles on the PHP Chinese website!