Vue依賴注入 provide 和 inject
阿新 • • 發佈:2018-11-07
允許一個祖先元件向其所有子孫後代注入一個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效
provide
選項允許我們指定我們想要提供給後代元件的資料/方法
provide
選項應該是一個物件或返回一個物件的函式
provide: function () {
return {
getMap: this.getMap
}
}
// 或者
provide: {
foo: 'bar'
}
然後在任何後代元件裡,我們都可以使用 inject
選項來接收指定的我們想要新增在這個例項上的屬性:
inject
選項應該是:
- 一個字串陣列,或
- 一個物件,物件的 key 是本地的繫結名,value 是:
- 在可用的注入內容中搜索用的 key (字串或 Symbol),或
- 一個物件,該物件的:
from
屬性是在可用的注入內容中搜索用的 key (字串或 Symbol)default
屬性是降級情況下使用的 value
inject: ['getMap']
Vue3.0 + Typescript 環境下
父元件 provide
@Provide()
public componentActivity = this.getProvide()
private getProvide() {
return 'aaaaaa'
}
// 或者
@Provide()
public componentActivity = {name:'aaaaaa'}
後代元件 Inject
@Inject()
private componentActivity: string
private created() {
console.info(this.componentActivity) // 'aaaaaa'
}
然而,依賴注入還是有負面影響的。它將你的應用以目前的元件組織方式耦合了起來,使重構變得更加困難。同時所提供的屬性是非響應式的,父元件傳值發生變化時,子元件接收的資料是不會對應改變的,如果需要響應傳值可以考慮vuex