Javascript 我可以从一个Vue.js组件导出两个对象吗？

我想知道是否可以从Vue.js组件中导出两个对象，以便其他组件可以选择使用哪一个

下面是我正在使用的示例：

关于foobar.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>

……但我看到的是：

This is the about page
Foo

所以它似乎不认识酒吧。我希望我可以选择导入哪个对象，该对象的数据将决定模板中填充的内容（因此，文本“foo”表示组件foo，而“bar”表示组件bar）

---

有没有办法做我想做的事？谢谢。

单向将AboutFooBar.vue划分为AboutFoo.vue和AboutBar.vue。但这没有用，因为它们几乎是一样的。你想用道具吗

child.vue：

<template>
  <span>{{ text }}</span>
</template>

<script>
  export default {
    name: 'Child',
    props: {
      msg: {
        type: String,
        default: ''
      }
    },
    data: () => {
      return {
        text: this.msg
      }
    }
  }
}
</script>

{{text}}
导出默认值{
姓名：'儿童'，
道具：{
味精：{
类型：字符串，
默认值：“”
}
},
数据：（）=>{
返回{
text:this.msg
}
}
}
}

关于.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>

<template>
  <div class="about">
    <h1>This is the about page</h1>
    <Child :msg="Foo" /><br/>
    <Child :msg="Bar" />
  </div>
</template>

<script>
  import Child from './Child'

  export default {
    name: 'About',
    components: {
      Child
    }
  }
</script>

这是关于页面


从“./Child”导入子项
导出默认值{
姓名：'关于'，
组成部分：{
小孩
}
}

首先，我认为这几乎肯定不是一个好模式。组件应适当减少和封装，并且可读

如果像这个例子一样，

Foo

和

Bar

是相似的，那么它们应该是一个组件，调用两次，每次使用不同的道具。另一方面，如果它们不同，它们应该是不同的组件

不过，为了回答这个问题：期望并要求默认导出包含组件。这就是你注意到的行为的原因

其他人问过这个问题，还有Evan You（Vue的创建者）。我将在这里也包括他的评论：

组件本身必须是默认导出。这是一项要求

诸如热模块替换、CSS注入、作用域CSS、SSR关键CSS集合等功能都取决于是否能够精确定位导出的组件-如果组件可以作为任意命名的组件导出，则无法工作。此外，还有一些工具（例如ESLint插件）基于组件是默认导出的假设

TL；DR：该组件必须是默认导出，并且不会更改

---

如果aboutfoobar有一个道具，为什么你不为每个道具发送一个不同的道具呢？我完全同意道具这件事。我只是在尝试导出，试图弄清楚它在vue.js中是如何工作的。这回答了我的问题。

<template>
  <div class="about">
    <h1>This is the about page</h1>
    <Child :msg="Foo" /><br/>
    <Child :msg="Bar" />
  </div>
</template>

<script>
  import Child from './Child'

  export default {
    name: 'About',
    components: {
      Child
    }
  }
</script>