Vue組件通信中非父子組件傳值知識(shí)點(diǎn)總結(jié)
前言：
如果想要了解非父子關(guān)系的組件傳值，最好是在了解父?jìng)髯雍妥觽鞲傅幕A(chǔ)上在來了解非父子傳值可能會(huì)有更透徹的思路。
因?yàn)榉歉缸觽髦凳峭ㄟ^定義事件總線來代理實(shí)現(xiàn)父?jìng)髯?子傳父從而實(shí)現(xiàn)的傳值方式。
這是我總結(jié)的父子傳值相關(guān)的知識(shí)，可供參考: http://www.fzitv.net/article/121806.htm
然后大概回顧一下父子傳值的過程:
根據(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è)方法后，再來看下面的這張圖：
如果還是不太明白，那就轉(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)聽自定義的AtoB事件
// B.vue// 導(dǎo)入eventBus
import eventBus from "./eventBus"
// 觸發(fā)事件并傳遞參數(shù)
eventBus.$on("AtoB", data =>{
console.log(data); // "Data_A"
})
總結(jié)：
要想了解非父子傳值必先了解父子間的傳值非父子傳值的核心在于通過事件總線作為一個(gè)中介然后通過在“傳遞值”的組件中觸發(fā)事件總線的某個(gè)自定義的事件來傳遞一個(gè)值(如果是多個(gè)值，可以傳遞一個(gè)對(duì)象) 最后在“接收值”的組件中來監(jiān)聽事件總線中你觸發(fā)的那個(gè)自定義事件來接收數(shù)據(jù)
以上就是本次介紹的全部相關(guān)知識(shí)點(diǎn)，感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。
相關(guān)文章
裝飾器是一種與類相關(guān)的語法糖,用來包裝或者修改類或者類的方法的行為,其實(shí)裝飾器就是設(shè)計(jì)模式中裝飾者模式的一種實(shí)現(xiàn)方式,下面這篇文章主要給大家介紹了關(guān)于Vue中使用裝飾器的相關(guān)資料,需要的朋友可以參考下2022-01-01
toRef 和 toRefs都是Vue3 中的響應(yīng)式轉(zhuǎn)換工具函數(shù),換句話說,toRef 和 toRefs 就是用來創(chuàng)建響應(yīng)式的引用的,主要用來取出響應(yīng)式對(duì)象里的屬性,或者解構(gòu)響應(yīng)式對(duì)象,本文小編就來帶大家搞清楚Vue3中toRef和toRefs的區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue watch immediate方法用法詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue3中defineComponent?的作用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
在Vue進(jìn)行前端開發(fā)中,條件判斷主要用于根據(jù)不同的條件來決定顯示或隱藏,或者進(jìn)行視圖之間的切換,這篇文章主要給大家介紹了關(guān)于Vue條件判斷之循環(huán)舉例詳解的相關(guān)資料,需要的朋友可以參考下2024-07-07
下面小編就為大家分享一篇Vue下的國(guó)際化處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
Vue 3中常用的生命周期鉤子和監(jiān)聽器的操作方法
這篇文章主要介紹了Vue 3中常用的生命周期鉤子和監(jiān)聽器的操作方法,分析常用的一些生命周期鉤子和監(jiān)聽器可以幫助我們?cè)诮M件中處理數(shù)據(jù)加載、狀態(tài)變化和響應(yīng)式更新,需要的朋友可以參考下2024-07-07
這篇文章主要給大家介紹了關(guān)于vue3前端獲取文件的絕對(duì)路徑問題解決的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
vue3+ts項(xiàng)目之安裝eslint、prettier和sass的詳細(xì)過程
這篇文章主要介紹了vue3+ts項(xiàng)目02-安裝eslint、prettier和sass的詳細(xì)過程,在本文講解中需要注意執(zhí)行yarn format會(huì)自動(dòng)格式化css、js、html、json還有markdown代碼，需要的朋友可以參考下2023-10-10
這篇文章主要介紹了VUE div click無效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01