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

在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组件，则需要提供其他组件的定义，否则称为component registration.如@Sumurai8所示，.vue个文件的导入本身并不注册相应的单文件组件；相反，这些部件必须在进口商的财产中明确注册.

例如，如果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.

demo 1

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

或者，可以使用UserDetail和UserEdit中的global component registration来解决错误，这将避免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