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

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

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

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

總結

以上是生活随笔為你收集整理的vue 组件以字符串插入_今日分享：vue3多层嵌套组件如何访问到最外层组件的数据？...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。