Question

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

index.js

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

export default { A,  B };

home.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 }误解为对象解构，但事实并非如此。

此代码尝试导入导出的值A和B.比如：

export class A {}
export class B {}

但是您要将对象导出为默认导出。

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

export { A,  B }

允许您使用import { A, B }。

值得查看the MDN documentation。

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

1 个答案: