Vue メッセージのサブスクリプションと公開

Vue メッセージのサブスクリプションと公開

備考: グローバル イベント バスはより多く使用されますが、メッセージのサブスクリプションとパブリッシュについてのみ知っておく必要があります。

1. ライブラリをインポートする必要があります: pubsub-js
2. グラフィカルなプロセス
   

• 前提: コンポーネントは C コンポーネントのコンテンツを取得したいと考えています
• 方法: A はサブスクライバー、B はパブリッシャーです。
• プロセス:
  A は、demo という名前のメッセージをサブスクライブし、テスト関数を設定します。
  B は、demo という名前のメッセージをパブリッシュし、A が取得したいパラメーター 666 を添付します。C
  でデモがリリースされると、テスト関数が実行されてパラメーター 666 を取得します。

3. pubsub-js をインストールする

npm i  pubsub-js

4. 
   メッセージインポートのサブスクライバにインストールされているライブラリをインポートします

import pubsub from 'pubsub-js'

学生と学校の Vue プロジェクト分析

1. 前提：

• 学校は Student で生徒の名前を取得したいと考えています
• School はメッセージの購読者であり、Student はメッセージの発行者です。 2. School での
  コード分析:
  

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

学生：

<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)
  }
},

上級バージョン:

• Studentのデータを学校に取得させる
• 
  School in Schoolの内容を変更するだけです。

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

このうち msgName は Vue にデフォルトで付属しており、値はメッセージ名 hello です。2 つ目は学校で必要なパラメータです。