Vue?privide?和inject?依賴注入的使用詳解
前言
關(guān)于Vue組件的通訊方式如下:
- 父子組件:通過prop,$ emit,【$ root,$ parent,$ children】;
- 非父子組件:vuex,父子層層傳遞、中央事務(wù)總線bus,$ref。
vue官網(wǎng)建議,在正常情況下,上述方式已經(jīng)能滿足絕大多數(shù)甚至所有的業(yè)務(wù)需求,對(duì)于應(yīng)用程序代碼應(yīng)優(yōu)先使用它們處理。然而,還有一種主要為 高階插件/組件庫 提供的用例辦法,即 provide / inject (這對(duì)選項(xiàng)需要一起使用)。
from表示在可用的注入內(nèi)容中搜索用的 key,default當(dāng)然就是默認(rèn)值。
示例
// 父級(jí)組件提供'foo' var Provider = { provide:{ foo:'bar' }, //... } 子組件注入'foo' var Child = { inject:['foo'], created(){ console.log(this.foo) // =>"bar" } //... }
項(xiàng)目案例
父組件
項(xiàng)目最外層的布局組件layout.vue
<template> <div> <!--主內(nèi)容--> <router-view></router-view> </div> </template> <script> export default{ name:'layout', provide(){ return{ layout:this//這里的this值當(dāng)前l(fā)ayout組件實(shí)例 box:'world' } }, data(){ return{ test:'hello' } }, } </script>
這里就是我們說的provide,向下提供信息,這里提供的是當(dāng)前的vue實(shí)例,相當(dāng)于給了后代一個(gè)接口。
這樣在任何的后代組件中,都可以使用inject選項(xiàng)來接收指定的我們想要添加在這個(gè)實(shí)例上的屬性。
子組件
layout.vue 組件內(nèi)的router-view 可能路由進(jìn)來很多其它子孫組件,比如order.vue
<script> export default { name:'order', inject:['layout','box'], created(){ console.log(this.layout.test);//hello console.log(this.box);//world } }
這樣也就可以訪問了,當(dāng)做當(dāng)前vue實(shí)例的屬性。這樣做的好處,相當(dāng)于給了一個(gè)捷徑,不用使用$parent一級(jí)一級(jí)的訪問。
我們可以把依賴注入看做一部分“大范圍有效的prop”,除了
祖先組件不需要知道哪些后代組件需要使用它提供的屬性后代組件不需要知道被注入的屬性來自哪里
到此這篇關(guān)于Vue privide 和inject 依賴注入的用法的文章就介紹到這了,更多相關(guān)Vue privide 和inject內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)列表無縫循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表無縫循環(huán)滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07vue使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對(duì)應(yīng)的PDF
這篇文章主要為大家詳細(xì)介紹了vue如何使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對(duì)應(yīng)的PDF,文中的示例代碼簡潔易懂,感興趣的小伙伴可以學(xué)習(xí)一下2023-08-08vue判斷內(nèi)容是否滑動(dòng)到底部的三種方式
這篇文章主要介紹了vue判斷內(nèi)容是否滑動(dòng)到底部的三種方式,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04antdv vue upload自定義上傳結(jié)合表單提交方式
這篇文章主要介紹了antdv vue upload自定義上傳結(jié)合表單提交方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10淺談el-table中使用虛擬列表對(duì)對(duì)表格進(jìn)行優(yōu)化
我們會(huì)經(jīng)常使用表格,如果數(shù)據(jù)量大就直接可以分頁,如果多條可能會(huì)影響表格的卡頓,那么應(yīng)該如何進(jìn)行優(yōu)化,感興趣的可以了解一下2021-08-08