Suscripción y publicación de mensajes Vue

Suscripción y publicación de mensajes Vue

Observaciones: el bus de eventos global se usa más y solo necesita saber sobre la suscripción y publicación de mensajes.

1. Necesidad de importar biblioteca: pubsub-js
2. Proceso gráfico
   

• Premisa: un componente quiere obtener el contenido en el componente C
• Método: A es suscriptor y B es editor.
• Proceso:
  A suscribe un mensaje llamado demo, establece una función de prueba
  B lo publica llamado demo y adjunta el parámetro 666 que quiere obtener A.
  Una vez liberada la demostración en C, se ejecutará la función de prueba para obtener el parámetro 666

3. Instalar pubsub-js

npm i  pubsub-js

4. importar la biblioteca instalada
   en los suscriptores de la importación de mensajes

import pubsub from 'pubsub-js'

Análisis del proyecto Vue de Student & School

1. premisa:

• La escuela quiere obtener el nombre del estudiante en Student
• School es el suscriptor del mensaje y Student es el editor del mensaje
  2. Análisis de código
  en School:

# 引入库
import pubsub from 'pubsub-js'
……
# 在School组件挂载时订阅名叫hello的消息，一旦hello消息发布了，就执行里面的函数
mounted(){
    
    
  pubsub.subscribe('hello',function (){
    
    
    console.log('有人发布了hello消息，hello消息的回调执行了')
  })

Alumno:

<template>
  <div>
    <h2>学生姓名：{
    
    {
    
    name}}</h2>
    # 点击按钮触发sendStudentName函数
    <button @click="sendStudentName">把学生名给School</button>
  </div>
</template>
# 引入库
import pubsub from 'pubsub-js'
……
# 在sendStudentName中发布hello消息，并传送666
methods:{
    
    
  sendStudentName(){
    
    
    pubsub.publish('hello',666)
  }
},

Versión avanzada:

• Deje que los datos en Estudiante sean adquiridos por Escuela
• Solo modifica los contenidos de School in
  School:

  mounted(){
    
    
    this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
    
    
      console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
    })
  },

Entre ellos, msgName viene con Vue de forma predeterminada y el valor es el nombre del mensaje hola. El segundo es el parámetro requerido por la Escuela.