Vue 是否可以像 Angular 一樣通過依賴注入（DI）導入組件？

Question

我使用了 Angularjs(1.x) 和 Vue 的新手。Angular 中有DI ，並且在控制器中引用服務或模板中的指令很容易，無論服務或指令在哪里。 Angular 將幫助您自動注入它。

但是我意識到Vue通過import(ES6)組件所在的路徑來引用組件。如果我在重構時（經常）更改組件目錄結構，則會丟失組件引用，我應該一一修復路徑。 多麻煩。

我知道有一個像angular DI這樣的vue-injector ，但它是否易於使用？

Answer 1

如果您認為要進行大量重組，您可以擁有一個每個人都導入的文件，然后導入所有其他文件，這樣您只需要在一個地方進行更改。

我個人更喜歡導入而不是依賴注入，這樣更容易理解所有內容的來源。

Answer 2

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

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

如果我在重構時（經常）更改組件目錄結構，則會丟失組件引用，我應該一一修復路徑。 多麻煩。

您可能不應該經常更改目錄結構。 查看Vue webpack 模板，了解如何正確構建 Vue 項目的示例。

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

另一種方法是全局注冊每個 Vue 組件，這樣您根本不需要導入它們。

另一種方法是通過創建一個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文件中更新導入。