Vue組件通信中非父子組件傳值知識(shí)點(diǎn)總結(jié)

更新時(shí)間：2019年12月05日 08:39:08 作者：R_Javac

在本篇文章里小編給大家整理的是關(guān)于Vue組件通信中非父子組件傳值知識(shí)點(diǎn)總結(jié)，有興趣的朋友們學(xué)習(xí)下。

前言：

如果想要了解非父子關(guān)系的組件傳值，最好是在了解父?jìng)髯雍妥觽鞲傅幕A(chǔ)上在來(lái)了解非父子傳值可能會(huì)有更透徹的思路。

因?yàn)榉歉缸觽髦凳峭ㄟ^(guò)定義事件總線來(lái)代理實(shí)現(xiàn)父?jìng)髯?子傳父從而實(shí)現(xiàn)的傳值方式。

這是我總結(jié)的父子傳值相關(guān)的知識(shí)，可供參考: http://chabaoo.cn/article/121806.htm

然后大概回顧一下父子傳值的過(guò)程:

根據(jù)上述信息可知，如果兩個(gè)組件需要傳遞值那么需要這兩個(gè)組件之間是父子關(guān)系才能傳遞數(shù)據(jù)。

那么如果有這樣一個(gè)組件，既可以幫你傳遞數(shù)據(jù)，又可以幫你接收數(shù)據(jù)該多好??？

于是乎，一個(gè)叫事件總線的概念出現(xiàn)了，它就可以幫助實(shí)現(xiàn)你想要的這些功能。

了解事件總線之前，需要先看下兩個(gè)重要的方法。

前置知識(shí):

1. $emit(event, data)方法

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

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

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

event: 綁定的事件類型

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 
// 事件總線： 只需要導(dǎo)出一個(gè)Vue實(shí)例即可
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)聽(tīng)自定義的AtoB事件

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

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

總結(jié)：

要想了解非父子傳值必先了解父子間的傳值非父子傳值的核心在于通過(guò)事件總線作為一個(gè)中介然后通過(guò)在“傳遞值”的組件中觸發(fā)事件總線的某個(gè)自定義的事件來(lái)傳遞一個(gè)值(如果是多個(gè)值，可以傳遞一個(gè)對(duì)象) 最后在“接收值”的組件中來(lái)監(jiān)聽(tīng)事件總線中你觸發(fā)的那個(gè)自定義事件來(lái)接收數(shù)據(jù)

以上就是本次介紹的全部相關(guān)知識(shí)點(diǎn)，感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。

您可能感興趣的文章: