Vue - 从索引中提取多个组件

Question

我创建了一个 Vue.js 项目，在为我的项目编写组件时使用 .vue 组件规范格式（请参见下面的示例）。我注意到，纯 JavaScript 可以导出从 vue 文件加载的这些组件。例如，index.js可以导出index.vue中定义的组件。我现在想做的是从index.js 导出多个组件。但是，当我导入多个组件时，它们不会呈现。如果我将 index.js 作为单个对象导入，然后提取组件，则它可以正常工作。为什么/如何不能从索引中提取多个组件？

索引.js

import A from './A.vue';
import B from './A.vue';

export default { A,  B };  

主页.vue

<script>
import Main from "../common/forms";
const { A, B } = Main; // Works 
// import { A, B } from "../common/forms"; // Not Working 


export default {
    name: 'app-home',
    components:{ A, B}
}
</script>
<template>
    <div id="app-home">
        <h1>App Home </h1>      
        <A /> 
        <B/>
    </div>
</template>

Answer 1

您误解import { A, B }为对象解构，但事实并非如此。

此 Codet 尝试导入已导出的值 A 和 B。例如：

export class A {}
export class B {}

但您正在将对象导出为默认导出。

如果您想导出两个组件而不是整个对象，您可以使用

export { A,  B }

这允许您使用import { A, B }.

值得查看MDN 文档。