首页
/
每日頭條
/
科技
/
vue 3.0父組件調用子組件的方法
vue 3.0父組件調用子組件的方法
更新时间:2025-07-11 02:05:19

我們都知道在vue中父組件向子組件傳參需要在組件使用的位置使用屬性綁定的方式,然後在子組件中通過props接收父組件中傳遞過來的數據,如果涉及到多層組件嵌套我們需要涉及到好多次屬性綁定和好多次props接收數據,導緻代碼維護較差,我們知道可以借助vuex實現狀态管理,今天我們來使用一下在vue3中提供的provide和inject來實現數據的傳遞.

我們定義一個父組件father.vue,定義一個子組件son.vue,将子組件挂載給父組件

vue 3.0父組件調用子組件的方法(vue3多層嵌套組件如何訪問到最外層組件的數據)1

同時我們在父組件中定義了一個數據叫result,使用provide将數據暴露屬性為msg,值是result變量存儲的變量’father’字符串,我們并沒有在子組件的使用位置使用屬性綁定的方式傳遞參數,接下來我們來看子組件的代碼

vue 3.0父組件調用子組件的方法(vue3多層嵌套組件如何訪問到最外層組件的數據)2

在子組件内部我們按需導入inject,并去接收父組件提供的屬性msg,使用變量m保存,并将mreturn,在結構位置使用插值表達式{{m}} m展示的信息為’father’字符串。

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
nvidia怎麼設置
nvidia怎麼設置
1、首先我們在桌面上點擊鼠标右鍵,然後選擇NVIDIA控制面闆。2、對喜歡玩遊戲的來說,顯卡的設置性能肯定是要高好了,所以在性能設置方面,一般選擇最高,如果不是玩遊戲的朋友,自己根據情況決定即可。3、接着在管理3D設置裡面,我們根據自己電腦性能進行設置,特别是最大預渲染幀數是由CPU來絕對的,如果你的電腦的CPU絕對的強大,那麼你就可以将幀數調節到5以上。一般這裡設置為3即可。4、然後點擊高級按鈕
2025-07-11
win10應用商店如何下載軟件
win10應用商店如何下載軟件
1、首先,打開win10系統,在電腦桌面的下方任務欄中找到應用百商店”的圖标,點擊打開。2、然後,即可看到界面中彈出的應用商店窗口。3、然後,在應用商店的應用列問表中選擇要下載的應用”,點擊打開。4、最後,在窗口中點擊獲取”按鈕,即可下答載應用,win10應用商店下載軟件,問題解決。
2025-07-11
電力液壓推動器原理
電力液壓推動器原理
1、電力液壓推動器工作原理,電力液壓推動器由兩部分組成,驅動電動機及器身(離心泵),器身部分由蓋、缸...
2025-07-11
推土機主要用于哪些方面的施工
推土機主要用于哪些方面的施工
1、推土機是一種能夠進行挖掘、運輸和排棄岩土的土方工程機械,在露天礦有廣泛的用途。2、用于建設排土場...
2025-07-11
挖掘機新手練什麼動作
挖掘機新手練什麼動作
1、盡量少做一些無效的動作,很多時候一些無效的操作在老手或者老闆的嚴重看起來就是在浪費油,如果施工的...
2025-07-11
Copyright 2023-2025 - www.tftnews.com All Rights Reserved