tft每日頭條

 > 科技

 > vue 3.0父組件調用子組件的方法

vue 3.0父組件調用子組件的方法

科技 更新时间:2024-11-24 16:27:00

我們都知道在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’字符串。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved