允許乙個祖先元件向其所有子孫後代注入乙個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效
provide
選項允許我們指定我們想要提供給後代元件的資料/方法
provide
選項應該是乙個物件或返回乙個物件的函式
provide: function ()
}// 或者
provide:
然後在任何後代元件裡,我們都可以使用inject
選項來接收指定的我們想要新增在這個例項上的屬性:
inject
選項應該是:
inject: ['getmap']
vue-cli 3.0 + typescript 環境下
父元件provide
@provide()
public componentactivity = this.getprovide()
private getprovide()
// 或者
@provide()
public componentactivity =
後代元件 inject
@inject()
private componentactivity: string
private created()
然而,依賴注入還是有負面影響的。它將你的應用以目前的元件組織方式耦合了起來,使重構變得更加困難。同時所提供的屬性是非響應式的,父元件傳值發生變化時,子元件接收的資料是不會對應改變的,如果需要響應傳值可以考慮vuex
依賴注入provide和inject
依賴注入 provide 和 inject 可以實現巢狀元件之間的資料傳遞 兩個函式只能在 setup 函式中使用 父元件中使用 provide 函式向下傳遞資料 子元件中使用 inject 函式獲取上層傳遞過來的資料 共享普通資料 父元件 import from vue composition a...
Vue之注入資料(provide與inject)
祖先元件可以通過provide選項,宣告提供的資料。後代元件可以通過inject選項,宣告注入的資料。不論元件層次有多深,在上下游關係成立的時間裡始終生效。export function initprovide vm component 2 coffee元件通過initinjections函式,接收...
vue元件依賴注入
在這個元件裡,所有的後代都需要訪問乙個getmap方法,以便知道要跟哪個地圖進行互動。不幸的是,使用 parent屬性無法很好的擴充套件到更深層級的巢狀元件上。這也是依賴注入的用武之地,它用到了兩個新的例項選項 provide和inject。provide選項允許我們指定我們想要提供給後代元件的資料...