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

In PHP当我们包含另一个文件中的代码时，我们将其包含在内，就这样，代码现在可以在执行包含的文件中使用。但在Vue.js，导入组件后我们还必须导出它。

为什么？为什么我们不直接导入它呢？

in Vue.js，导入组件后我们还必须导出它。

我想你可能指的是以下几行User.vue并想知道为什么UserDetail and UserEdit导入到文件中，然后在脚本导出中导出components财产：

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

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

vue-loader期望脚本导出.vue文件来包含组件的定义，该定义有效地包含组装组件模板的配方。如果模板包含其他 Vue 组件，则需要提供其他组件的定义，否则称为组件注册 https://v2.vuejs.org/v2/guide/components-registration.html#Local-Registration。正如@Sumurai8 指出的，导入.vuefiles 本身并没有注册对应的single-file-components；相反，这些组件必须在进口商的components财产。

例如，如果App.vue的模板包含<user /> and 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>

...the 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.

demo 1 https://codesandbox.io/s/8yv00079k8

当 Vue 尝试渲染时<user /> inside App.vue的模板，Vue不知道如何解析内部<app-user-detail> and <app-user-edit>因为他们的组件注册丢失了。这些错误可以通过本地组件注册来解决User.vue（即components属性如上所示）。

或者，可以通过以下方式解决错误全局组件注册 https://v2.vuejs.org/v2/guide/components-registration.html#Global-Registration of UserDetail and 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(...);

demo 2 https://codesandbox.io/s/6nvn68lxrw