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

回答