This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Moon, moon

You can see south, you can see north

If you see her, tell her I miss her.

preface

The previous article described how vUE uses Props to communicate between components, which is the simplest and most basic way to communicate between components. The parent component passes data down to the child component via props, and when the child component has something to tell the parent, it tells the parent through a $emit event. This is convenient and practical for parent-child components, but not so friendly for grandparent or sibling components.

Within the Vue ecosystem, there is also a separate Vuex library that handles communication between components, but most of the time, we don’t need to use Vuex as a big shot. Instead, we can consider a simpler Vue EventBus, called EventBus.

Here’s a simple thought:

Once you see the project, a piece of code or a variable that can only come out under many key points, or the way to get it is the same, this time you must consider whether you can make the code reuse, we have to learn to be lazy, lazy to move forward faster.

Let’s begin today’s text.

What is a global event bus

1.1. Introduction of concepts

One of the things we need to recognize first, the interaction between components, is that we are able to share data between components.

The essence of component interaction, such as props, EventBus, Vuex, publish and subscribe, is data sharing. Figuring this out makes it much easier to use the global event bus. Today’s article, however, is mainly to take everyone to use first, the principle of weekend pull.

EventBus is also called an EventBus. The idea of using EventBus as a bridge in Vue is that all components share the same event center and can register to send and receive events, so components can notify other components up and down in parallel. However, it is too convenient and can cause a disaster that is difficult to maintain if used incorrectly. Therefore, a more complete Vuex is needed as a state management center to elevate the concept of notification to the shared state level.

1.2. Install global event bus

// If you want to be an event bus:
//1. The bus object must be visible to all component objects, so we put it in the Vue prototype
The event bus object must be able to call the $ON and $emit methods (the bus object must be a Vue instantiation object or a component object).
Copy the code

Determine the global event bus: Mount the VM object as an event bus to the prototype object of the VUE

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// Instructions for using the global bus
When using a global event bus, it is better to use sibling or grandparent components that cannot communicate with each other directly
new Vue({
  render: h= > h(App),
  // beforeCreate Life cycle function before data is mounted
  beforeCreate () {
    Install the global event bus
    Vue.prototype.$bus = this
  }
}).$mount('#app')

Copy the code

1.3. Basic use

Small cases:

Introduce a Demo component within the App component. The Demo component has a button that you can click to modify the values passed by the App component to its children and update the view.

App component

<template> <div class="todo-container"> < props: MSG =" MSG "></Demo> </div> </template> <script> import Demo from './components/Demo' export default { Components: {Demo}, data () {return {MSG: 'hello, hello '}}, methods: {this.msg = 'updateMsg ()'; // if (MSG = value) {this.msg = value} // if (MSG = value) {this.msg = value} // if (MSG = value) {this.msg = value} // if (MSG = value) {this.msg = value} // if (MSG = value) {this.msg = value} // if (MSG = value) { $bus.$on('updateMsg', this. UpdateMsg) this.$bus.$on('updateMsg2', this. // Get in the habit of untying events when components are destroyed. BeforeDestroy () {// Is untying events in multiple ways, with empty arguments, directly lets all methods unbind. // this.$bus.$off(['updateMsg',....] $bus.$off('updateMsg') this.$bus.$off('updateMsg2') this.Copy the code

The demo components

<template> <div> <h1>{{MSG}}</h1> <button @click="updateMessage()"> </button> </div> </template> <script> export default {props: {MSG: String}, methods: {updateMessage () {// Interact through the global event bus, // the first argument is to call back the method name in the parent component, and can be followed by the argument, $bus.$emit('updateMsg')}, updateMessage2 (value) {this.$bus.$emit('updateMsg2', value)}} </script>Copy the code

The global event bus and Props implement component communication

Summary for personal use:

Props is used to implement communication between components, which is more convenient for parent-child component communication. If it is a grandparent or sibling component, there will be an extra middle layer, and it will not be useful, and it will feel cumbersome.

For the global event bus, it hangs on the VM prototype, which is very convenient for communication between grandparent and grandchild components, or sibling components. No intermediate layer is required, which is very convenient.

After the language

Everyone come on!! If there are deficiencies in the article, please point out in time, in this solemn thanks.

The paper come zhongjue shallow, and must know this to practice.

Hello everyone, I am ning Zaichun: homepage

A young man who likes literature and art but takes the path of programming.

Hope: by the time we meet on another day, we will have achieved something.