一文淺析vue中訊息訂閱與發布的使用方法

什麼是訊息訂閱與發布？怎麼使用？以下這篇文章為大家介紹一下vue中訊息訂閱與發布的使用方法，希望對大家有幫助！

1.訊息訂閱與發布

#訊息訂閱與發布是一種元件間通訊的方式，適用於任意組件間通訊。能更好的實現組件間通訊（訊息訂閱與發布就像是送報員一樣。好比小a向報社訂閱了一份報紙，然後在報社留下了自己的信息，然後送報員就按著小a留下的訊息找到了小a所在的地方將報紙送給了他）

2.如何使用pubsub

1.首先我們要安裝pubsub,開啟vscode→開啟終端機→輸入安裝指令（也可以在cmd進行安裝）【相關建議：vuejs影片教學、web前端開發】

npm i pubsub-js

2 .引入（在需要使用pubsub的組件內引入即可）

import pubsub from ' pubsub-js'

3.接收數據A組件想接收數據，則在A組件中訂閱消息，訂閱的回調留在A組件自身。

methods(){demo(data){.....}mounted() {this.pid = pubsub. subscribe( 'xx'，this . demo) }

我們應該先找到想要接受資料的元件，配置一個mounted的配置項，進行訊息的訂閱subscribe這個單字也有訂閱的意思，也就是下面這個元件就是小a的角色，他要訂閱一份報紙，然後留下了自己的住址'hello',再利用回調獲取數據，這裡的msgName，data分別是訂閱名稱和資料（也就是小a的家庭住址和送報員所攜帶的報紙）

import pubsub from "pubsub-js";
export default {
  name: "School",
  data() {
    return {
      name: "山鱼特效屋",
      address: "南京北城区"
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("hello", (msgName, data) => {
      console.log("该消息已经发布", msgName, data);
    });
  },
  //使用完之后销毁该绑定事件避免后期错误使用
  beforeDestroy() {
    pubsub.unsubscribe();
  }
};

• 提供資料

pubsub. publish( ' xxx' ,数据)

publish方法的第一個參數'hello'為訂閱名，第二個參（this.name）為想要傳遞的資料。

import pubsub from "pubsub-js";
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男"
    };
  },
  // 配置一个methods项
  methods: {
    snedStudentName() {
      // 选择给谁提供数据
      pubsub.publish("hello", this.name);
    }
  }
};

• 最好在beforeDestroy鉤子中去取消訂閱。

  beforeDestroy() {pubsub.unsubscribe();}

3.nextTick

#1.語法:this. $nextTick(回呼函數)

2.作用：放在$nextTick 當中的操作不會立即執行，而是等資料更新，DOM更新完成之後再執行

3.使用時機:當改變資料後，要基於更新後的新DOM進行某些操作時，要在nextTick所指定的回呼函數中執行。

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是一文淺析vue中訊息訂閱與發布的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！