Vue中怎么實現(xiàn)非父子組件傳值

發(fā)布時間：2021-07-09 15:52:32 來源：億速云閱讀：112 作者：Leah 欄目：web開發(fā)

Vue中怎么實現(xiàn)非父子組件傳值，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

前置知識:

1. $emit(event, data)方法

event: 觸發(fā)的事件類型

data: 觸發(fā)這個事件時傳遞的參數(shù)

2. $on(event, callBack(data))方法

event: 綁定的事件類型

callBack: 綁定的這個事件所對應(yīng)的回調(diào)函數(shù)，其默認(rèn)的第一個參數(shù)data是使用$emit觸發(fā)這個事件時所傳遞的參數(shù)

在了解了這兩個方法后，再來看下面的這張圖：

Vue中怎么實現(xiàn)非父子組件傳值

如果還是不太明白，那就轉(zhuǎn)換成代碼在分析一下：

首先，定義一個eventBus:

// eventBus.js 
// 事件總線： 只需要導(dǎo)出一個Vue實例即可
import Vue from 'vue'
export default new Vue()

然后，在A組件中導(dǎo)入eventBus, 并觸發(fā)自定義的AtoB事件

// A.vue// 導(dǎo)入eventBus
import eventBus from "./eventBus"

// 觸發(fā)事件并傳遞參數(shù)
eventBus.$emit("AtoB", "Data_A")

最后，在B組件中導(dǎo)入eventBus，并監(jiān)聽自定義的AtoB事件

// B.vue// 導(dǎo)入eventBus
import eventBus from "./eventBus"

// 觸發(fā)事件并傳遞參數(shù)
eventBus.$on("AtoB", data =>{
  console.log(data); // "Data_A" 
})

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

Vue中怎么實現(xiàn)非父子組件傳值

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽