How to use Bus in Vue component communication

This article mainly introduces the specific use of Bus for Vue component communication. Now I will share it with you and give you a reference.

Regarding component communication, I believe that everyone is familiar with it, so I won’t go into details. Friends who are not familiar with component communication can move here.

$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 it 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 state 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.

There is such a definition in the vue official document: the communication of non-parent-child components, the content is very little, as follows:

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

The simplest way to upgrade $dispatch and $broadcast is to use the event center to allow components to communicate freely, no matter which layer the component is in the component tree. Since Vue instances implement an event dispatching interface, you can achieve this by instantiating an empty Vue instance.
This centralized event middleware 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是传递的参数
 //...
 }
}

Listening components

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

If you need to listen to 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);
},

The above is me I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to implement event-responsive progress bar component in Vue

How to implement two variable values ​​in JS The exchange method

How to implement custom instructions in Vue?

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