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

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

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

前言：

如果想要了解非父子關(guān)系的組件傳值，最好是在了解父傳子和子傳父的基礎(chǔ)上在來了解非父子傳值可能會有更透徹的思路。

因為非父子傳值是通過定義事件總線來代理實現(xiàn)父傳子+子傳父從而實現(xiàn)的傳值方式。

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

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

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

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

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

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

前置知識:

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" 
})

總結(jié)：

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

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

您可能感興趣的文章: