Vue可以通過依賴注入（DI）來導入組件嗎？

我使用了angularjs（1.x），並且新增了Vue.There具有角度爲DI，並且引用了控制器中的服務或模板中的指令很容易，無論服務或指令是什麼。 Angular將幫助你自動注入它。Vue可以通過依賴注入（DI）來導入組件嗎？

但我意識到Vue公司通過import(ES6)指一個組件路徑其中in.If我重構時（經常）更改組件direcotry結構的成分，就會失去了分量是指，我應該可以解決路徑逐個。它有多麻煩。

我知道有一個vue-injector像角DI，但如果它很容易使用？

2017-06-18 junlin

您應該可以使用[動態組件]（https://vuejs.org/v2/guide/components.html#Dynamic-Components） –

從2.2.0開始，[提供/注入]（https）：//vuejs.org/v2/api/#provide-inject）語法，但僅建議用於高級用途。 – Bert

Vue沒有提供任何正式的依賴注入機制。完全取決於你如何導入依賴關係。

大多數Vue代碼示例根本不使用依賴注入，只是通過import和export使用ES6模塊系統。

如果我在重構（頻繁）時更改組件direcotry結構，將會丟失組件引用，並且我應該逐個修復路徑。它有多麻煩。

你可能不應該經常改變目錄結構。查看Vue webpack template，瞭解如何正確構建Vue項目的示例。

這就是說，它並沒有真正回答你的問題。你使用的是webpack（或類似的東西）？您可以精確地配置webpack應該如何通過resolve配置屬性來定位模塊，以便您不必使用相對導入路徑。

另一種方法是register each Vue component globally，所以你根本不需要導入它們。

另一種方法是通過創建一個components.js模塊來濫用ES6模塊，該模塊導入每個Vue組件（無論它們在哪裏）並將它們全部從該模塊中導出。現在，您只需從該中央模塊導入，而不是搜索要導入的每個事物的特定模塊位置。

// components.js 

import Button from 'path/to/button.vue'; 
import Alert from 'path/to/alert.vue'; 

export { 
    Button, 
    Alert, 
};

// myform.js 

import { Button } from 'path/to/components.js';

如果更改的button.vue的位置，你只需要從components.js文件中更新導入。

2017-06-19 04:13:18

感謝您的詳細解答。我將選擇創建'components.js'文件的方式來導入所有組件。這似乎是一個簡單的好方法。 – junlin

我上面說過的'vue-injector'怎麼樣？@Decade順便說一下，我怎麼可以在評論中說你呢？ – junlin

因爲你在評論我的答案，所以不需要@我（我會收到通知）。我還沒有使用vue-inject，所以我不能對它進行真正的評論，但我快速瀏覽了文檔，看起來像是它的工作。 –

如果你認爲你要重組很多，你可以有一個文件，每個人都導入，並導入所有剩下的文件，這樣你只需要在一個地方改變。

我個人更喜歡導入依賴注入，方式更容易理解所有東西都來自哪裏。

2017-06-18 14:57:52 PiniH

回答