vue元件依賴注入

2021-09-19 23:57:17 字數 966 閱讀 2128

在這個元件裡,所有的後代都需要訪問乙個getmap方法,以便知道要跟哪個地圖進行互動。不幸的是,使用$parent屬性無法很好的擴充套件到更深層級的巢狀元件上。這也是依賴注入的用武之地,它用到了兩個新的例項選項:provideinject

provide選項允許我們指定我們想要提供給後代元件的資料/方法。在這個例子中,就是內部的getmap方法:

provide: function () 

}

然後在任何後代元件裡,我們都可以使用inject選項來接收指定的我們想要新增在這個例項上的屬性:

inject: ['getmap']
你可以在這裡看到完整的示例。相比$parent來說,這個用法可以讓我們在任意後代元件中訪問getmap,而不需要暴露整個例項。這允許我們更好的持續研發該元件,而不需要擔心我們可能會改變/移除一些子元件依賴的東西。同時這些元件之間的介面是始終明確定義的,就和props一樣。

實際上,你可以把依賴注入看作一部分「大範圍有效的 prop」,除了:

然而,依賴注入還是有負面影響的。它將你應用程式中的元件與它們當前的組織方式耦合起來,使重構變得更加困難。同時所提供的屬性是非響應式的。這是出於設計的考慮,因為使用它們來建立乙個中心化規模化的資料跟使用$root做這件事都是不夠好的。如果你想要共享的這個屬性是你的應用特有的,而不是通用化的,或者如果你想在祖先元件中更新所提供的資料,那麼這意味著你可能需要換用乙個像 vuex 這樣真正的狀態管理方案了。

Vue 依賴注入 provide inject

provide inject是解決元件之間的通訊問題的利器,不受層級結構的限制。小白,修改乙個官網的例子 doctype html utf 8 title js vue2.6.js script h1 h2 h3 style head dynamic component demo border 1p...

vue依賴元件 知識

知識 1 slot就是為了向元件內部傳遞指定的內容 2 npm list vue 檢視 vue的版本 3 vue v 檢視 vue cli 的版本 4 公升級vue cli 到3.x以上 需要重新 clean install npm uninstall vue cli g 先刪 npm instal...

對GUI元件的依賴注入

對於某些人來說,這是不言而喻的,但是最近的一次通訊使我想知道其中隱含的危險 在我的 學習vaadin 一書中,我展示了如何將vaadin web框架與spring 為什麼這樣?到目前為止,這是我的推理。使用di有一些原因。僅舉幾例 現在,ui元件可能必須與其他3種元件進行協作 其他ui元件,gui行...