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