在Vue.js中,为什么我们必须在导入后导出组件？

Question

在PHP当我们从另一个文件包含的代码,我们包括它,就是这样,代码现在我们进行的包含文件中提供给我们.但是Vue.js,在导入组件后,我们还必须将其导出.

为什么？我们为什么不简单地导入它？

Answer 1

在Vue.js导入组件后,我们还必须将其导出.

我想您可能会引用以下几行User.vue并想知道为什么UserDetail并将UserEdit其导入到文件中,然后在脚本导出的components属性中导出:

import UserDetail from './UserDetail.vue';
import UserEdit from './UserEdit.vue';

export default {
  components: {
    appUserDetail: UserDetail,
    appUserEdit: UserEdit
  }
}

vue-loader期望.vue文件的脚本导出包含组件的定义,这有效地包括组装组件模板的配方.如果模板包含其他Vue组件,则需要提供其他组件的定义,也称为组件注册.正如@ Sumurai8所指出的那样,.vue文件本身的导入并没有注册相应的单文件组件; 而是必须在进口商的components财产中明确注册这些组件.

例如,如果App.vue的模板包含<user />和User.vue被定义为:

<template>
  <div class="user">
    <app-user-edit></app-user-edit>
    <app-user-detail></app-user-detail>
  </div>
</template>

<script>
export default {
  name: 'user'
}
</script>

... User组件将呈现为空白,您将看到以下控制台错误:

[Vue warn]: Unknown custom element: <app-user-edit> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <app-user-detail> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

演示1

当Vue尝试渲染<user />内部App.vue模板时,Vue不知道如何解析内部<app-user-detail>,<app-user-edit>因为它们的组件注册丢失了.可以通过本地组件注册User.vue(即,components上面显示的属性)来解决错误.

另外,该错误可能解决全球组件注册的UserDetail和UserEdit,这将避免在当地注册User.vue.请注意,必须在创建Vue实例之前完成全局注册.例:

// main.js
import Vue from 'vue';
import UserDetail from '@/components/UserDetail.vue';
import UserEdit from '@/components/UserEdit.vue';

Vue.component('app-user-detail', UserDetail);
Vue.component('app-user-edit', UserEdit);

new Vue(...);

演示2

Answer 2

中的组件vue可能很棘手。如果您还没有，我强烈建议您阅读 vue.js 网站上有关组件注册如何工作的文档，特别是 tony19 提到的全局和本地注册。您在屏幕截图中显示的代码示例实际上做了几件事。其一，它使组件在本地可用，并且只能在本地（如在该 .vue 文件中）使用。此外，它还使其可以作为key您在对象中提供的模板使用components，在本例中，app-user-detail而app-user-edit不是user-detail和user-edit。

重要的是，应该提到的是，import实际上并不需要此组件注册才能发挥作用。您可以在单个文件中定义多个组件。密钥components提供了一种识别该组件正在使用的内容的方法。所以这import不是必需的，所以vue需要components密钥来了解您正在使用什么作为组件，以及什么只是其他代码。

最后，正如其他一些答案所暗示的那样，关键components实际上并不是出口。组件的默认签名vue需要 ，export但这不会导出密钥下列出的组件components。它所做的是以vue自上而下的方式构建。根据应用程序设置的其余部分的外观，您可能使用或不使用单个文件组件。无论哪种方式，vue都将从顶层开始vue instance，并通过组件向下工作，除了全局注册之外，没有顶层组件知道它下面正在使用哪些组件。

这意味着为了vue正确渲染事物，每个组件都必须包含对其使用的额外组件的引用。该引用作为更高级别组件的一部分导出（在您的情况下User.vue），但不是组件本身（UserDetail.vue）。

因此，看起来可能vue需要在导入后进行第二次导出，但实际上它正在执行其他操作以允许根 vue 实例渲染您的组件。

顺便说一句，关于这个主题的 vue 文档确实非常好，如果您还没有，请看一下我上面链接的部分。还有一个关于模块导入/导出系统的附加部分似乎与您所要求的内容高度相关，您可以在这里找到： Module-systems。