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

在

PHP

中，当我们包含来自另一个文件的代码时，我们包含了它，就是这样，代码现在可以在执行包含的文件中使用。但是在

Vue.js

中，导入组件后，我们还必须将其导出

---

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

import

将代码导入到当前文件中，但它自己不做任何事情。设想以下非vue代码：

// File helpers.js
export function tickle(target) {
  console.log(`You tickle ${target}`)
}

// File main.js
import { tickle } from 'helpers'

您已经导入了代码，但它没有任何作用。要想真正逗乐某人，需要调用函数

tickle('polar bear');

---

在Vue中，这同样适用。您定义了一个组件（或者实际上只是一个对象），但该组件本身不做任何事情。您可以导出此组件，以便可以在Vue库可以处理此对象的其他位置导入它

在Vue组件中，可以导出当前组件，并导入模板中使用的组件。您通常会执行以下操作：

<template>
  <div class="my-component">
    <custom-button color="red" value="Don't click me" @click="tickle" />
  </div>
</template>

<script>
import CustomButton from './CustomButton';

export default {
  name: 'my-component',
  components: {
    CustomButton
  }
}
</script>

这有什么用？您告诉Vue在由

#app

标识的html元素中呈现

，并告诉Vue应该在

/app.Vue

中找到此元素

---

但是，如果Vue编译器“更智能”，我们就不能忽略导出吗？是的，也不是。是的，因为编译器可以将很多东西转换为有效的javascript，不是的，因为它没有意义，严重限制了您可以对组件执行的操作，同时也使编译器更容易出现错误，不易理解，总体上也不太有用

在

Vue.js

中，导入组件后，我们还必须将其导出

我想您可能参考了

User.vue

中的以下几行，并想知道为什么

UserDetail

和

UserEdit

被导入到文件中，然后在脚本导出的

组件

属性中导出：

从“/UserDetail.vue”导入UserDetail；
从“/UserEdit.vue”导入UserEdit；
导出默认值{
组成部分：{
appUserDetail:UserDetail，
appUserEdit:UserEdit
}
}

vue loader

希望

.vue

文件的脚本导出包含组件的定义，其中有效地包括组装组件模板的方法。如果模板包含其他Vue组件，则需要提供其他组件的定义，否则称为。如@Sumurai8所示，

.vue

文件的导入本身并不注册相应的单个文件组件；相反，这些组件必须在进口商的

组件

属性中明确注册

例如，如果

App.vue

的模板包含

和

User.vue

被定义为：

vue中的组件可能很棘手。如果您还没有，我强烈建议您阅读vue.js网站上关于组件注册工作原理的文档，尤其是tony19提到了全局和全局注册。您在屏幕截图中显示的代码示例实际上是在做一些事情。首先，它使组件在本地可用，并且仅在本地（如在该.vue文件中）可用。此外，它将其作为
组件
对象中提供的
键提供给模板，在这种情况下，
应用程序用户详细信息
和
应用程序用户编辑
，而不是
用户详细信息
和
用户编辑

重要的是，应该提到的是，实际上不需要导入
，组件注册才能正常工作。可以在单个文件中定义多个组件。
components
键提供了一种识别该组件正在使用什么的方法。因此，
import
不是必需的，因此
vue
确实需要使用
components
键来了解作为组件使用的是什么，以及什么只是其他代码

最后，正如其他一些答案所提到的，
组件
键实际上不是导出。
vue
组件的默认签名需要
导出
，但这不是导出
组件
键下列出的组件。它所做的是让
vue
以自顶向下的方式构建。根据应用程序设置的其他部分的外观，您可能使用单文件组件，也可能不使用。无论哪种方式，
vue
都将从顶层开始，通过组件向下运行，除了全局注册，没有顶层组件知道它下面正在使用哪些组件

这意味着对于
vue
来说，要正确渲染内容，每个组件必须包含对其使用的额外组件的引用。此引用作为更高级别组件的一部分导出（在您的示例中为
User.vue
），但不是组件本身（
UserDetail.vue
）

因此，
vue
似乎需要在导入后进行第二次导出，但实际上它正在执行其他操作，以允许根vue实例呈现组件

顺便说一句，关于这个主题的vue文档真的很好，如果您还没有看过我上面链接的部分，请看一看。有一个关于模块导入/导出系统的附加部分似乎与您的要求高度相关，您可以在这里找到：.
为了
App.vue
能够使用
User
-组件，您需要导出
User.vue
-文件的
默认对象

在
导出默认值{
中，您实际上并没有导出新导入的组件。您只是导出了一个完全正常的
JavaScript对象
。该对象恰好引用了另一个对象

当您导入对象（或函数、数组或…）时
import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

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