Shulou(Shulou.com)06/01 Report--

Editor to share with you the Vue component of the event bus and message publishing subscription example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Brief introduction

This paper mainly introduces the definition and writing method of event bus and how to subscribe and publish messages by Vue.

Event bus

Event bus is a way of communication between components, which is suitable for communication between any components, such as irrelevant two components, parent-child components, descendant components, and so on.

The event bus has two features:

Is a vue component instance or an vue instance that acts as a message relay station. If components An and B want to communicate, component A stores messages to the relay station, message B gets messages, or vice versa.

All components should be able to access the event bus.

If there is communication between An and B components, if A sends data to B, the following steps are required:

The main premise is that you need to create an event bus, which usually uses the vm instance itself as the event bus, and saves it in the prototype object of the Vue constructor at a certain time, because the prototype object of the prototype object of the component instance = the prototype object of the vue instance, so all component instances get the event bus.

1.B (receiver) needs to always bind a custom event to the event bus and set the event callback.

2. When A (sender) wants to send data, it only needs to trigger the custom event bound by B in the event bus and pass the data.

Main.js:

/ / introduce vue dependency import Vue from 'vue'// import component Appimport App from'. / App.vue'// close the production prompt Vue.config.productionTip = false// to create a vue instance new Vue ({render: h = > h (App), beforeCreate () {/ / usually sets the event bus in the beforeCreate lifecycle function. / / the following code sets the vm object itself to the prototype object of Vue. The property name is usually $bus. This does not force Vue.prototype.$bus = this;} / / configure the vue instance to manage a container where the id is app}). $mount ('# app')

App.vue:

/ / modified / / introduce A component and B component, involving es modular syntax import A from ". / components/A.vue" import B from ". / components/B.vue" export default {components: {/ / register component A, B}}

B.vue:

Name of component B: {{name}} A component name: {{NameForA}} export default {data () {return {name: "yehaocong", NameForA: ""}}, methods: {/ / callback function getNameFromA (nameFromAVC) {console.log ("receive name from A component:" NameFromAVC) This.NameForA = nameFromAVC;}}, mounted () {/ / always bind custom events to the event bus. This.$bus.$on ("getNameFromA", this.getNameFromA);}, beforeDestroy () {/ / usually needs to unbind custom events when the component is destroyed. This.$bus.$off ("getNameFromA")},}

A.vue:

{{name}} send name attribute value to other components export default {data () {return {name: "liaoxianyan"}}, methods: {sendName () {/ / sender triggers event this.$bus.$emit ("getNameFromA", this.name);},},}

Effect:

It is usually best to unbind custom events when the component is destroyed:

Publish and subscribe to messages

Definition of subscription and publication:

1. Is a way of communicating between components.

Similar to a message center, component A subscribes a message to the message center, and once message component B publishes the message to the message, component An immediately receives the message and executes the corresponding callback.

A third-party message subscription publishing library is usually used, and pubsub-js is recommended.

Step 1: install the dependency: npm I pubsub-js

Step 2: subscribe to the message at the message receiver.

Step 3: publish the message at the sender.

Or use the above A, B components as an example, A component is the sender, B component is the receiver.

Step 2:

Define the message in component B:

Step 3: publish the message in component A:

Effect:

You usually need to unsubscribe the message when the component is destroyed.

This is all of the content of the article "sample Analysis of event bus and message Publishing subscriptions in Vue components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.