Vue如何實現(xiàn)非父子組件傳值

這篇文章主要介紹“Vue如何實現(xiàn)非父子組件傳值”，在日常操作中，相信很多人在Vue如何實現(xiàn)非父子組件傳值問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue如何實現(xiàn)非父子組件傳值”的疑惑有所幫助！接下來，請跟著小編一起來學(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ù)

如果還是不太明白，那就轉(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" 
})

到此，關(guān)于“Vue如何實現(xiàn)非父子組件傳值”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>