VUE父子組件之間的傳值,以及兄弟組件之間的傳值


一、Vue父子 組件之間傳值

vue使用中,經常會用到組件,好處是:
1、如果有一個功能很多地方都會用到,寫成一個組件就不用重復寫這個功能了;
2、頁面內容會簡潔一些;方便管控;
子組件的傳值是通過props來傳遞數據,$emit來觸發事件;
下面是一個簡單的子組件props傳值:
父組件的部分:
在這里插入圖片描述
在這里插入圖片描述
首先引入組件,在組件上綁定你要傳給組件的值;
在這里插入圖片描述

在這里插入圖片描述
然后,在組件里通過props來接收你從父頁面傳過來的值;so,父組件把值傳給子組件就完成了;
下面是一個子組件在把值傳給父組件的例子:
父組件部分:
在這里插入圖片描述
在這里插入圖片描述
子組件部分:
在這里插入圖片描述
在這里插入圖片描述
先是c h a n g e 監 聽 i n p u t 值 的 變 化 , 通 過 change監聽input值的變化,通過changeinput過emit來連接父組件和子組件之間的事件;transferUser是在父組件連接事件的名稱,后面跟上返回的數據;然后在父組件通過getUser獲取數據,就這樣子傳父的過程就完成了…

二、兄弟組件之間的傳值
兄弟組件之間的傳值和父子組件之間的傳值非常相似,都是通過$emit;
原理是:vue一個新的實例,類似於一個站,連接着兩個組件,也就是一個中央事件總線;
下面是一個bus實例:
在這里插入圖片描述
1、創建一個firstChild組件,引入bus,接着一個按綁定數據傳輸事件:
在這里插入圖片描述

我們通過一個$emit自定義一個事件,並傳遞數據;
$emit實例方法觸發當前實例(這里的當前實例就是bus)上的事件,附加參數都會傳給監聽器回調。

下面是另一個組件,引入bus實例,通過一個p標簽接收數據:
在這里插入圖片描述

這個組件的mounted里,我們監聽了userDefinedEvent事件,並把傳遞過來的事件通過$on監聽回調函數;
o n : 監 聽 當 前 實 例 上 的 自 定 義 事 件 ( 此 處 當 前 實 例 為 b u s ) 。 事 件 可 以 由 on:監聽當前實例上的自定義事件(此處當前實例為bus)。事件可以由on:(bus)由emit觸發,回調函數會接收所有傳入事件觸發函數($emit)的額外參數。
在這里插入圖片描述

接下來就是展示真正的效果的時候了:
在這里插入圖片描述

點擊之后:
在這里插入圖片描述

總結:
1,首先創建一個事件總線,例如bus,作為一個通訊的橋梁;
2,在需要傳值的組件中,通過e m i t 觸 發 一 個 自 定 義 事 件 , 並 傳 遞 參 數 ; 3 , 在 接 收 數 據 的 組 件 中 , 通 過 emit觸發一個自定義事件,並傳遞參數; 3,在接收數據的組件中,通過emit3過on監聽自定義事件,並處理傳遞過來的參數;

另外:
1、兄弟組件之間與父子組件之間的數據交互,兩者相比較,兄弟組件之間的通信其實和子組件向父組件傳值有些類似,其實他們的通信原理都是相同的,例如子向父傳值也是e m i t 和 emit和emit和on的形式,只是沒有eventBus,但若我們仔細想想,此時父組件其實就充當了bus這個事件總線的角色。
2、這種用一個Vue實例來作為中央事件總線來管理組件通信的方法只適用於通信需求簡單一點的項目,對於更復雜的情況,Vue也有提供更復雜的狀態管理模式Vuex來進行處理。

基本夠用


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM