首页 文章

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

提问于
浏览 次
0

我创建了一个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>
javascript vue.js vuejs2

1 回答

  • 2

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

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

    export class A {}
export class B {}

    但是您将对象导出为默认导出 .

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

    export { A,  B }

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

    值得一试the MDN documentation .

    回复于

相关问题