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

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供金州網(wǎng)站建設(shè)、金州做網(wǎng)站、金州網(wǎng)站設(shè)計、金州網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、金州企業(yè)網(wǎng)站模板建站服務(wù)，十余年金州做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

1.什么是消息訂閱與發(fā)布

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

2.如何使用pubsub

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

npm i pubsub-js

2.引入（在需要使用pubsub的組件內(nèi)引入即可）

import pubsub from ' pubsub-js'

3.接收數(shù)據(jù)A組件想接收數(shù)據(jù)，則在A組件中訂閱消息，訂閱的回調(diào)留在A組件自身。

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

我們應(yīng)該先找到想要接受數(shù)據(jù)的組件，配置一個mounted的配置項，進(jìn)行消息的訂閱subscribe這個單詞也有訂閱的意思，也就是下面這個組件就是小a的角色，他要訂閱一份報紙，然后留下了自己的住址'hello',再利用回調(diào)獲取數(shù)據(jù)，這里的msgName，data分別是訂閱名和數(shù)據(jù)（也就是小a的家庭住址和送報員所攜帶的報紙）

import pubsub from "pubsub-js";
export default {
  name: "School",
  data() {
    return {
      name: "山魚特效屋",
      address: "南京北城區(qū)"
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("hello", (msgName, data) => {
      console.log("該消息已經(jīng)發(fā)布", msgName, data);
    });
  },
  //使用完之后銷毀該綁定事件避免后期錯誤使用
  beforeDestroy() {
    pubsub.unsubscribe();
  }
};

• 提供數(shù)據(jù)

pubsub. publish( ' xxx' ,數(shù)據(jù))

publish方法的第一個參數(shù)'hello'為訂閱名，第二個參（this.name）為想要傳遞的數(shù)據(jù)。

import pubsub from "pubsub-js";
export default {
  name: "Student",
  data() {
    return {
      name: "張三",
      sex: "男"
    };
  },
  // 配置一個methods項
  methods: {
    snedStudentName() {
      // 選擇給誰提供數(shù)據(jù)
      pubsub.publish("hello", this.name);
    }
  }
};

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

  beforeDestroy() {pubsub.unsubscribe();}

3.nextTick

1.語法:this. $nextTick(回調(diào)函數(shù))

2.作用：放在$nextTick 當(dāng)中的操作不會立即執(zhí)行，而是等數(shù)據(jù)更新，DOM更新完成之后再執(zhí)行

3.使用時機(jī):當(dāng)改變數(shù)據(jù)后，要基于更新后的新DOM進(jìn)行某些操作時，要在nextTick所指定的回調(diào)函數(shù)中執(zhí)行。

到此，關(guān)于“vue中消息訂閱與發(fā)布如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)頁名稱：vue中消息訂閱與發(fā)布如何使用
標(biāo)題URL：http://weahome.cn/article/ipeheo.html