vue中消息訂閱與發布如何使用

這篇文章主要介紹“vue中消息訂閱與發布如何使用”，在日常操作中，相信很多人在vue中消息訂閱與發布如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中消息訂閱與發布如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1.什么是消息訂閱與發布

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

2.如何使用pubsub

1.首先我們要安裝pubsub,打開vscode→打開終端→輸入一下安裝命令（也可以在cmd進行安裝）

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所指定的回調函數中執行。

到此，關于“vue中消息訂閱與發布如何使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！