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

榆林ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話(huà)聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！

前置知識(shí): 

1. $emit(event, data)方法

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

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

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

event: 綁定的事件類(lèi)型

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

在了解了這兩個(gè)方法后，再來(lái)看下面的這張圖：

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

首先，定義一個(gè)eventBus: 

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

然后，在A(yíng)組件中導(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)聽(tīng)自定義的AtoB事件

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

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

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

本文標(biāo)題：Vue中怎么實(shí)現(xiàn)非父子組件傳值
當(dāng)前URL：http://jinyejixie.com/article12/ggsddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、定制網(wǎng)站、軟件開(kāi)發(fā)、全網(wǎng)營(yíng)銷(xiāo)推廣、移動(dòng)網(wǎng)站建設(shè)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)