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

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

　　

　　同時(shí)我們?cè)诟附M件中定義了一個(gè)數(shù)據(jù)叫result,使用provide將數(shù)據(jù)暴露屬性為msg,值是result變量存儲(chǔ)的變量’father’字符串,我們并沒有在子組件的使用位置使用屬性綁定的方式傳遞參數(shù),接下來我們來看子組件的代碼

　　

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

總結(jié)

以上是生活随笔為你收集整理的今日分享：vue3多层嵌套组件如何访问到最外层组件的数据？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。