如何从一个.vue文件中导出多个对象

10
我正在使用TypeScript和Vue。对于这个特定的用例,我想从我的.vue文件中导出多个项目。就像这样:
// FooBar.vue
<template>
    ...
</template>

export class Foo extends Vue {
    foo: string = "foo";
}

export const Bar = {bar: "bar"};

然后像这样导入它们:

// Baz.vue

import { Foo, Bar } from 'FooBar.vue';

@Components({ components: { Foo }})
... // rest of the code

在Vue中,是否有一种方法可以从.vue文件中导出多个对象?

1个回答

17

在你的 Vue 文件中编写:

class Foo extends Vue {
    foo: string = "foo";
}

const Bar = { bar: "bar" };

export { Bar };
export default Foo;

接下来您可以使用以下代码将其导入:

import Foo, { Bar } from 'FooBar.vue';

更详细的关于导出工作原理的信息可以在这里找到。


3
我发现一个问题:Foo 必须是默认导出(default export),否则其他组件无法看到它。 - Artur Grigio
1
对我来说,这似乎不起作用。编译器抱怨找不到“Bar”。 - balu
我也收到了一个警告:“模块“*.vue”没有导出……”针对非默认导出(在我的情况下是一个接口)。它在某种程度上可以工作……代码编译和运行,但 TypeScript 代码无法识别该接口(类型仍为 any)。我现在只是将所有其他声明放在一个单独的 ts 文件中。 - Diego Frehner

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接