Message subscription and publishing

principle

The subscription and publication of messages can also realize the communication between any two components

There are two steps ：

• Subscribe to news
• Release the news

Next, we will understand its steps through an example ：

Now we want to implement components A And C Communication between ( Suppose it's a component C Send data to A Components )：

• First component A To subscribe to a message ( Let's assume that this message is called demo)
• Then we will make a callback ( Let's assume that the name of this callback is test)
• Components C Send a message , And carry the data ( We will also name this message demo)
• C Once the component releases the message , because A The component subscribed to this message , So the corresponding callback function will be executed , The data is passed to A Components .

So the message name is very important , What was your name when you subscribed , What was your name when you released it .

Native js It is not easy to subscribe and publish messages . So we usually use the third-party library to complete this function .

What I'm using here is pubsub.js, It can subscribe and publish messages in any framework .

Grammatical annotation

First we install pubsub.js：

npm i pubsub-js

Introduce grammar ：

import pubsub from 'pubsub.js'

This was introduced pubsub Its essence is an object

Let's first introduce , His relevance API：

Message publishing syntax ：

pubsub.publish('name',value)

Message subscription syntax ：

PubSub.subscribe('name', The callback method )

Be careful ：
The callback function here has two formal parameters ：
The first formal parameter represents the message name
The second parameter represents the passed data

Syntax for unsubscribing ：

• Cancel the specified subscription

Pubsub.unsubscribe('name')

• Cancel all subscriptions

PubSub.clearAllSubscriptions()

Code implementation

We use the code in the global event bus . Still Student Components to School The component sends the student name .

Component structure

First of all, because School The component is the receiver of the message , So let's start with School Component to subscribe to messages ：

<template>
        <div class="demo">
            <h2> School name :{
   {name}}</h2>
            <h2> School address :{
   {address}}</h2>
            <hr>            
        </div>
</template>

<script> import pubsub from 'pubsub-js' export default {
       name:'DongBei', data(){
       return {
       name:'NEFU', address:' Harbin ', } }, // props:['getSchoolName'], methods:{
       studentNameDeliver(name,data){
       console.log('School The component has received a message from Studennt Student name of the component ',data) } }, mounted() {
       pubsub.subscribe('studentName',this.studentNameDeliver) }, } </script>

<style > .demo {
       background-color: yellow; } </style>

Then we'll be in Student Component to publish messages ：

<template>
    <div class="demo">
        <h2 class="stu" > Student name :{
   {name}}</h2>
        <h2 > Student age :{
   {age}}</h2>
        <button @click="deliverStudentName"> Give the student's name to School Components </button>
    </div>
</template>

<script> import pubsub from 'pubsub-js' export default {
       name:'MyStudent', data(){
       return {
       name:' Zhang San ', age:18 } }, methods:{
       deliverStudentName(){
       pubsub.publish('studentName',this.name) } } } </script>

<style > /*.demo {*/ /* background-color: green;*/ /*}*/ </style>

effect ：

Finally, we have to finish the work , stay School Unbind the message subscription in the component ：

The unbinding of message subscription is a bit similar to the closing of timer ：

<template>
        <div class="demo">
            <h2> School name :{
   {name}}</h2>
            <h2> School address :{
   {address}}</h2>
            <hr>            
        </div>
</template>

<script> import pubsub from 'pubsub-js' export default {
       name:'DongBei', data(){
       return {
       name:'NEFU', address:' Harbin ', } }, methods:{
       studentNameDeliver(name,data){
       console.log('School The component has received a message from Studennt Student name of the component ',data) } }, mounted() {
       this.pubsubId = pubsub.subscribe('studentName',this.studentNameDeliver) }, beforeDestroy() {
       pubsub.unsubscribe(this.pubsubId) } } </script>

<style > .demo {
       background-color: yellow; } </style>

Be careful ： According to the following figure

there this yes undefined
To avoid errors, the callback function here , There are two ways of writing ：
①methods Write in , To introduce
② Write as arrow function

summary

News subscription and Publishing （pubsub）

1. A way of communicating between components , It is suitable for communication between any components .

2. Use steps ：

   1. install pubsub：npm i pubsub-js

   2. introduce : import pubsub from 'pubsub-js'

   3. receive data ：A The component wants to receive data , It's in A Subscribe to messages in components , The callback of the subscription remains A The component itself .

      methods(){
              
        demo(data){
              ......}
      }
      ......
      mounted() {
              
        this.pid = pubsub.subscribe('xxx',this.demo) // Subscribe to news 
      }
      

   4. Provide data ：pubsub.publish('xxx', data )

   5. Best in beforeDestroy In the hook , use PubSub.unsubscribe(pid) Go unsubscribe .