首页
/
每日頭條
/
科技
/
vue 3.0父組件調用子組件的方法
vue 3.0父組件調用子組件的方法
更新时间:2025-07-12 01:40:52

我們都知道在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
推荐阅读
硬件功能測試和性能測試
硬件功能測試和性能測試
硬件狗狗這款軟件是綠色單文件版本的軟件,無廣诰零彈窗。在功能上,軟件不僅可以檢測硬件,監測硬件使用情況,并且還可以像lu大師一樣,對電腦性能進行跑分。軟件的主要功能區裡,分成了硬件檢測、我的硬件、性能跑分、系統狀态、軟件管理、排行榜和工具箱...
2025-07-12
微信投票怎麼弄這個新方式超方便
微信投票怎麼弄這個新方式超方便
小編發現最近很多網民在網上搜索微信群怎麼發起投票?現代人的日常生活和工作基本上已經離不開微信,有時候遇到一些需要大量征集大家意見的情況,可以借助投票活動來實現,可以省去大量的人工統計時間成本,那麼如何在微信群裡發起投票呢?其實方法很簡單,以...
2025-07-12
bartender怎麼排列多個模闆
bartender怎麼排列多個模闆
昨天推文介紹了如何在BarTender軟件裡創建新标簽模闆,模闆創建了以後,就可以編輯内容了。今天先給大夥講講在新标簽裡該如何建立文本,說的直白一些,就是編輯文字。1.點擊文字圖标“單行”,在标簽空白部分點擊後如下圖所示。(備注:選擇多行,...
2025-07-12
怎樣設置表格數據錄入方向的改變
怎樣設置表格數據錄入方向的改變
怎樣設置表格數據錄入方向的改變?Excel是Office套件中最通用和最有用的程序之一,也是辦公族最常用的軟件,今天就教給大家Excel怎麼調整單元格内容方向,接下來我們就來聊聊關于怎樣設置表格數據錄入方向的改變?以下内容大家不妨參考一二希...
2025-07-12
蘋果手機刷機之後無法激活怎麼辦
蘋果手機刷機之後無法激活怎麼辦
蘋果手機刷機之後無法激活怎麼辦?稍後重試,如果是蘋果的激活服務器繁忙等原因,過一段時間後重新激活就可以順利激活了如果多次重試仍無法激活,請嘗試下一步,接下來我們就來聊聊關于蘋果手機刷機之後無法激活怎麼辦?以下内容大家不妨參考一二希望能幫到您...
2025-07-12
Copyright 2023-2025 - www.tftnews.com All Rights Reserved