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

我們都知道在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
推荐阅读
windows10如何在桌面上顯示便簽
windows10如何在桌面上顯示便簽
有的職場人喜歡用便簽貼紙,将工作事情記錄在便簽貼紙中也不容易忘記,現在除了紙質的,還出現了電子版的,能在電腦上使用的,将便簽放在電腦桌面上,随時查看編輯,既然如此,有推薦使用的桌面便簽軟件麼?用哪款便簽軟件記事備忘?小編為大家推薦一款電腦桌...
2025-07-11
英朗最新款
英朗最新款
日前,我們從上汽通用汽車官方獲悉,2021款别克英朗将于4月30日上市。據了解,新款英朗将搭載48V輕混技術,并滿足國六b排放标準。外觀方面,新車延續了現款車型的設計風格,前臉采用飛翼式進氣格栅,中網有熏黑的網狀格栅打底,懸浮于中網上方的盾...
2025-07-11
mes系統實現的功能
mes系統實現的功能
MES系統功能是相當的強大,對企業來說具有一定的優勢,而且不同類型的mes系統其功能模塊也是不同的,下面是蘇州通商軟件對MES系統功能模塊介紹。1、工序詳細調度:通過基于有限能力的調度,考慮生産過程的交錯、重疊并行操作來準确計算出設備上下料...
2025-07-11
金立手機擴大内存代碼
金立手機擴大内存代碼
金立手機擴大内存代碼?手機内存是手機裡的一個硬件,除了更換,通過撥打什麼電話是無法修改内存的,可以帶上手機的發票及手機的其它有關票據,帶至金立售後找專業技術人員更換,我來為大家科普一下關于金立手機擴大内存代碼?下面希望有你要的答案,我們一起...
2025-07-11
手機上有膜屏幕會有刮痕嗎
手機上有膜屏幕會有刮痕嗎
手機上有膜屏幕會有刮痕嗎?手機上有膜屏幕不會有刮痕,但是如果刮痕比較深,就可以透過貼膜刮到屏幕了,我來為大家科普一下關于手機上有膜屏幕會有刮痕嗎?下面希望有你要的答案,我們一起來看看吧!手機上有膜屏幕會有刮痕嗎手機上有膜屏幕不會有刮痕,但是...
2025-07-11
Copyright 2023-2025 - www.tftnews.com All Rights Reserved