今日分享:vue3多层嵌套组件如何访问到最外层组件的数据?
我們都知道在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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 微软出品 Kubernetes 最新学习
- 下一篇: 小编带你了解oracle使用索引和不使用