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

我們都知道在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
推荐阅读
centos7 grub詳解
centos7 grub詳解
大多數Linux發行版使用GRUB2作為引導加載程序。GRUB2(GNUGrandUnifiedBootloader)是GNU項目中的一個引導加載程序包。GRUB2提供兩種類型的密碼保護:修改菜單條目時需要密碼,但啟動菜單條目時不需要密碼;...
2025-07-17
iphone 13 pro max手機壁紙
iphone 13 pro max手機壁紙
首發!夏天系列手機壁紙,AndroidiOS系統通用。iPhoneX、11、12、13系列手機均适用。溫馨提示:4K超高清原圖上傳,記得查看原圖再保存哦~原圖保存方法:點擊圖片,長按圖片,點擊查看原圖,再點擊保存即可~小問卷:家人們還喜歡什...
2025-07-17
手機相機裡的hdr是什麼東西
手機相機裡的hdr是什麼東西
最近發現很多人在網上咨詢手機拍照選項裡的HDR模式,這個模式相信很多人都用過,不過想拍出理想的照片卻沒有那麼容易,那麼HDR模式的原理是什麼呢?在拍照的時候,經常會遇到曝光過度、曝光不夠、光線太差等情況,這時候隻要打開HDR模式就可以達到很...
2025-07-17
仙劍奇俠傳6人物加點
仙劍奇俠傳6人物加點
熱衷《仙劍》系列的玩家最後都要做的都是盡可能的做到速通或是低通一遍,而《仙劍奇俠傳6》也不例外,下面讓大家看看《仙劍奇俠傳6》困難模式低通及BOSS戰視頻攻略吧。在6代以前,曆代仙劍都有很多關于戰術和戰鬥系統的技術貼,例如仙劍3、4、5系列...
2025-07-17
微軟xbox機型對比
微軟xbox機型對比
在SONY引領兩個主機時代後,微軟終于拿出了自己的殺手锏——XboxGamePass。包月會員制的服務,可讓玩家直接爽玩市面上數百款熱門遊戲,而實惠的價格則讓不少索粉也開始動搖了。目前,微軟最新一代遊戲主機包含XboxSeriesX/S這兩...
2025-07-17
Copyright 2023-2025 - www.tftnews.com All Rights Reserved