I'm using typescript
with Vue. And for this specific use case, I'd like to export multiple items from my .vue
file. Like this:
// FooBar.vue
<template>
...
</template>
export class Foo extends Vue {
foo: string = "foo";
}
export const Bar = {bar: "bar"};
And then import them like this:
// Baz.vue
import { Foo, Bar } from 'FooBar.vue';
@Components({ components: { Foo }})
... // rest of the code
Is there a way to export multiple objects from a .vue
file in Vue?
Use named exports to export multiple functions in TypeScript, e.g. export function A() {} and export function B() {} . The exported functions can be imported by using a named import as import {A, B} from './another-file' . You can have as many named exports as necessary in a single file.
You can use the Download CSV export file button to download a csv file. The file will be exported using the default name: export. csv .
Vue Single-File Components (a.k.a. *.vue files, abbreviated as SFC) is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file. Here's an example SFC: vue <script> export default { data() { return { greeting: 'Hello World!'
export default is used to create local registration for Vue component.
In your vue file write:
class Foo extends Vue {
foo: string = "foo";
}
const Bar = { bar: "bar" };
export { Bar };
export default Foo;
You will then be able to import these using:
import Foo, { Bar } from 'FooBar.vue';
More detailed information on how export works can be found here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With