I'm curious if it's possible to export two different objects from a Vue.js component so that other components can choose which one to use.
Here's the scenario I'm currently working on:
AboutFooBar.vue:
<template>
<span>{{ text }}</span>
</template>
<script>
export default {
name: 'Foo',
data: () => {
return {
text: 'foo'
}
}
}
const Bar = {
name: 'Bar',
data: () => {
return {
text: 'bar'
}
}
}
export { Bar }
</script>
Then I proceed to import both Foo and Bar in About.vue:
<template>
<div class="about">
<h1>This is the about page</h1>
<Foo /><br/>
<Bar />
</div>
</template>
<script>
import Foo from './AboutFooBar'
import { Bar } from './AboutFooBar'
export default {
name: 'About',
components: {
Foo,
Bar
},
data: () => {
return {
}
}
}
</script>
What I was anticipating to see displayed on the page is:
This is the about page
Foo
Bar
...but instead, only Foo is being displayed. It seems like Bar is not recognized. I had hoped to be able to provide a choice of which object to import, with the data of each object determining what populates the template (displaying 'foo' for component Foo and 'bar' for component Bar).
Is there a solution to achieve this? Thank you.