1. Event bus

1 Introduction

EventBus is also called event bus. In Vue, EventBus can be used as a communication bridge concept. It is like all components share the same event center. You can register to send events or receive events to the center, so components can notify other components in parallel up and down, but that is too It is convenient, so if used carelessly, it will cause disasters that are difficult to maintain. Therefore, a more complete Vuex is needed as a state management center to elevate the concept of notifications to the shared state level.

2. How to use EventBus

1. Initialization

The first thing you need to do is create the event bus and export it so that other modules can use or listen to it. We can handle this in two ways.

Method 1: Create a new .js file, such as event-bus.js. All you need to do is introduce Vue and export an instance of it (in this case, I call it EventBus). In essence, it is a component that does not have a DOM. All it has is its instance method, so it is very lightweight.

// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

Method 2: You can initialize EventBus directly in main.js in the project
这种方式初始化的 EventBus 是一个全局的事件总线

// main.js

Vue.prototype.$EventBus = new Vue()
// 使用时为：
this.$bus.$emit('nameOfEvent',{
    
     ... pass some event data ...});

2. Send event

EventBus.$emit(channel: string, callback(payload1,…))

EventBus.$emit("decreased", {
    
    num:this.num,deg:this.deg});

3. Receive events

EventBus.$on(channel: string, callback(payload1,…))
only listens once: EventBus.$once(channel: string, callback(payload1,…))

data() {
    
    
    return {
    
    
        degValue:0,
        fontCount:0,
        backCount:0
    };
},
mounted() {
    
    
    EventBus.$on("decreased", ({
     
     num,deg}) => {
    
    
        this.fontCount -= num
        this.$nextTick(()=>{
    
    
            this.backCount -= num
            this.degValue -= deg;
        })
    });
}

4. Remove event listener

EventBus.$off('decreased',{})
You can use EventBus.$off('decreased') to remove all listeners for this event in the application. Or call EventBus.$off() directly to remove all event channels. Note that there is no need to add any parameters.

2. $nextTick method

Execute the delayed callback after the next DOM update cycle. Use this method immediately after modifying the data to get the updated DOM.
Used to solve asynchronous problems, such as when the initialization of the carousel in swiper is performed at the same time as the request: the rendering of the carousel should be written into the execution statement after the request is successful, and the $nextTick method should be used.

// 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
	 this.$nextTick(() => {
    
    
	   var mySwiper = new Swiper('.swiper-container', {
    
    
	     direction: 'horizontal', // 垂直切换选项
	     loop: true, // 循环模式选项
	
	     // 如果需要分页器
	     pagination: {
    
    
	       el: '.swiper-pagination',
	     },
	
	     // 如果需要前进后退按钮
	     navigation: {
    
    
	       nextEl: '.swiper-button-next',
	       prevEl: '.swiper-button-prev',
	     },
	
	     // 如果需要滚动条
	     scrollbar: {
    
    
	       el: '.swiper-scrollbar',
	     },
	   })
	 })

Event bus and $nexttick method in vue

Article directory