2. 程式人生 > 其它 >Vue中使用PubSub-js進行元件間通訊時出現‘publish‘ of undefined異常解決辦法

Vue中使用PubSub-js進行元件間通訊時出現‘publish‘ of undefined異常解決辦法

阿新 • • 發佈：2021-01-25

技術標籤：vuevuepubsub-js

解決辦法：如果釋出訊息的元件中使用的程式碼形如this.PubSub.publish(‘xxx’, test)，就將其中的this.去掉，即直接使用PubSub.publish(‘xxx’, test)。

在vue中進行元件間通訊時，發現控制檯出現如下異常：

[Vue warn]:Error in callback for watcher "xxx": "TypeError: Cannot read property 'publish' of undefined"

經過網上反覆查詢，未找到有用資訊，於是就嘗試將this.PubSub.publish(‘xxx’, test)中的this.去掉，居然成功了。究其原因，尚不明確。

並且，經過實測發現，將元件中的匯入語句import PubSub from 'pubsub-js’刪除，也不影響pubsub-js功能。

相關推薦

Vue中使用PubSub-js進行元件間通訊時出現‘publish‘ of undefined異常解決辦法

技術標籤：vuevuepubsub-js 解決辦法：如果釋出訊息的元件中使用的程式碼形如this.PubSub.publish(‘xxx’, test)，就將其中的this.去掉，即直接使用PubSub.publish(‘xxx’, test)。

Vue通過EventBus實現兄弟元件間通訊

Vue中父子元件通訊的方式是：父元件通過props向下傳遞資料給子元件，子元件通過$emit事件告訴父元件。對於沒有引用關係的兄弟元件，若不需要Vuex，可以考慮通過EventBus(即事件匯流排)來實現通訊。

Vue中使用js-cookie外掛實現登入時記住密碼後存取到Cookie中

場景 使用vue實現一個登入頁面時，實現記住密碼功能。 在勾選了記住密碼後將密碼儲存到Cookie中，然後下次直接從Cookie中取。

淺談vue中provide和inject 用法 , EventBus 任意元件間通訊 ，vue指令 自定義指令

一、概念解析 成對出現：provide和inject是成對出現的 作用：用於父元件向子孫元件傳遞資料

vue元件間通訊

父元件通過props傳遞資料給子元件 父元件通過props屬性向子元件傳遞資料，子元件利用元件例項的props屬性定義元件需要接收的引數，在使用元件時通過attribute的方式傳入引數，如：

[js]vue中 給router-view 元件的 繫結 key 的原因

vue中 給router-view 元件的 繫結 key 的原因 1. 不設定 router-view 的 key 屬性 由於 Vue 會複用相同元件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 這類連結跳轉時, 將不在執行created, mount

八種Vue元件間通訊方式合集(推薦)

前言 Vue 提供了各種各樣的通訊,其中包括 兄弟間 的通訊和 非兄弟間 的通訊,藉此機會做個總結，查閱起來方便。如果喜歡的話可以幫忙點個贊 :+1: 或者關注一下 :yum:

vue 父子元件間通訊

1、子元件通過 import Children from \'./children.vue\'引入在父元件在父元件通過 // 引入子元件

VUE 元件間通訊

props this.$refs.子元件名稱.edit() vue的自定義屬性 訊息訂閱與釋出（PubSub） vuex 1：props 父元件向子元件傳值

vue之父子元件間通訊例項講解（props、$ref 、 $emit ）

元件是 vue.js 最強大的功能之一，而元件例項的作用域是相互獨立的，這就意味著不同元件之間的資料無法相互引用。那麼元件間如何通訊，也就成為了vue中重點知識了。這篇文章將會通過props、$ref和 $emit 這幾個知識

vue元件間通訊八種方式

1.props和$emit 父元件向子元件傳遞資料是通過prop傳遞的，子元件傳遞資料給父元件是通過$emit觸發事件來做到的。

19 關於Vue中main.js，App.vue，index.html之間關係進行總結

index.html---主頁，專案入口 App.vue---根元件 main.js---入口檔案 在網頁的Title部分，載入了index.html中定義的Title，而在正文部分，載入了App.vue中定義的部分.

Vue如何實現元件間通訊

1. 父子間通訊 最常見的就是父子之間的通訊，通訊是雙向的資料傳遞。 1.1 父元件 --> 兒子元件

Vue3.x使用mitt.js進行元件通訊

目錄快速開始使用方式核心原理vue2.x 使用 MnukVnOOEventBus 進行元件通訊，而 Vue3.x 推薦使用 mitt.js。

超詳細的vue元件間通訊總結

目錄前言一、props、$emit單向資料流二、$parent、$children三、$attrs、$listeners四、provide、inject五、eventBus(事件匯流排)六、x七、localstorage總結前言

Vue實現元件間通訊的幾種方式(多種場景)

目錄1、Props父 >>> 子 （Props）子>>> 父（$emit）2、Bus事件匯流排3、x狀態管理庫4、Router5、快取以下是我在開發中用到過的vue元件之間的通訊方式，不同的場景使用不同的方式，基本滿足所有開發

vue中利用prop進行父子通訊時的注意事項總結

目錄注意點一注意點二注意點三：單項資料流注意點四總結注意點一 當在元件上傳入一個普通的字串時，我們可以直接這樣寫：

vue元件間通訊方式

一、父子元件通訊 <template> // 父元件 <div> // 子元件 <children @search=\"search\" :message.sync=\"message\"></children>

vue倉庫、元件間通訊、前後臺數據互動、前端儲存資料大彙總

路由重定向 倉庫介紹 vuex外掛：可以完成任意元件間資訊互動（移動端) 大白話原理：倉庫充當第三方，其他元件都從第三方倉庫獲取info，那麼獲取的資料都是一份。類似全域性單例

Vue中fragment.js使用方法小結

createDocumentFragment 如果要在一個節點上一次性插入多個元素怎麼辦，比如說一次插入 10000 個節點？