preface

In recent interviews, one of the questions asked is do you know the vUE event bus? What does the event bus do? Do you know what it is? When I asked about these, many had not heard of them, some had not used them, and not many knew. I wonder if I have not done many projects or if I have only practiced for the project, I have not been exposed to this. Today, let’s talk briefly about what this event bus is.

use

Those of you who have learned VUE know that vUE components can transmit values from parent to child, child to parent, and even parent to grandson… These official have corresponding examples to explain how to operate, and the adjacent ones also have VUEX or other methods. If the current project does not use VUEX, how to solve it? Here we will talk about the event bus of VUE.

define

This definition, not the official definition, but one of his understanding, event bus as EventBus has said, in fact and vuex or some similar, namely have the effect of a communication, the equivalent of a center, the center to manage the event, then when we need to change center sending and receiving events. So it’s actually a lot easier to use than Vuex. At the moment, everything is good and bad, but the event bus is too convenient and once there are too many events, it can be difficult to maintain the disaster. This can be used if the project is not too large.

use

There are two methods of use, one is global, one is on-demand, here focus on on-demand as an example, global do not do too much introduction, many places do not recommend the use of global.

Initialize the

The EventBus is actually an instance of a vue, which in this case is called an EventBus, so you can export the instance and use it. The definition is as follows:

import Vue from 'vue'
export default new Vue()
Copy the code

We can also initialize the entire event bus directly in main.js.

// main.js
Vue.prototype.$EventBus = new Vue()
Copy the code

Now that the EventBus has been created, it’s time to introduce the event-calling method into your component.

Send the event

The event is sent using $emit and takes two parameters, the event name and the parameter. Here is an example of the folding of the ElementUI sidebar menu:

<template> <div class="header"> <div class="header-logo"> <img alt="Vue logo" src=".. /.. /assets/images/common/logo.png" @click="changeCollapse"> </div> </div> </template> <script> import bus from '@/utils/eventBus.js' export default { data() { return { collapse: false } }, methods: { changeCollapse(){ this.collapse = ! this.collapse bus.$emit('collapse', this.collapse) } } } </script>Copy the code

The above example toggles the folding of the sidebar menu when we click log. This is in the top component, so it is obviously impossible to control the folding of the sidebar component directly, so the VUE event bus is used to do this. The above send event is also very simple, the event name is collapse, the parameter is the current data defined collapse.

Accept the event

Accept events with $on, which is also notified when the top component changes, so it’s pretty easy to use. Examples are as follows:

<template> <div class="sidebar"> <el-scrollbar class="scroll-wrapper"> <el-menu class="sidebar-el-menu" :default-active="$route.path" :collapse="collapse" unique-opened router> <subItem :items="items" :collapse="collapse" />  </el-menu> </el-scrollbar> <div class="slideIn" @click="changeCollapse">||</div> </div> </template> <script> import bus  from "@/utils/eventBus.js" import subItem from "./subitem" export default { props:['items'], data() { return { collapse: false } }, created() { bus.$on("collapse", msg => { this.collapse = msg }) }, methods: { changeCollapse() { this.collapse = ! this.collapse bus.$emit("collapse", this.collapse) } } } </script>Copy the code

In the above example, when the collapse state is changed, the corresponding event is sent to the event center, and if it is used elsewhere, it will change with the change here.

Remove event

To remove an event, use $off. If you want to remove the listener of an event, use the first parameter as the event name. If you want to remove all events without any parameters, use $off. Examples are as follows:

<script> import bus from "@/utils/eventBus.js" export default { methods: {{handleClick () bus. $off (" collapse ", {}) / / remove a single event / / bus.} $off () / / remove all events}} < / script >Copy the code

conclusion

In general, it is very convenient to use EventBus. Just remember to send event emit, receive event emit, receive event emit, and receive event OF. It is easy to use EventBus when communicating with sibling components or components without any containing relationships.