Vue依賴注入 provide 和 inject

2021-09-30 16:30:07 字數 967 閱讀 1416

允許乙個祖先元件向其所有子孫後代注入乙個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效

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選項允許我們指定我們想要提供給後代元件的資料...