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

Question

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

这是我正在使用的示例:

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>

然后我在 About.vue 中导入 Foo 和 Bar:

<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>

我希望在页面上看到的是:

This is the about page
Foo
Bar

...但是我看到了:

This is the about page
Foo

所以好像不认识Bar。我期望我可以选择要导入的对象，并且该对象的数据将决定填充到模板中的内容(因此组件 Foo 的文本“foo”和组件 Bar 的“bar”)。

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

Answer 1

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

如果像示例一样，Foo 和 Bar 相似，则它们应该是一个组件，调用两次，并且每次都提供不同的 props。另一方面，如果它们不同，则它们应该是不同的组件。

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

其他人已经问过这个和 Evan You(Vue 的创建者)has commented in this feature request .我也会在这里包括他的评论:

The component itself must be the default export. That's a requirement.

Features like hot module replacement, CSS injection, scoped CSS, SSR critical CSS collection all depend on being able to precisely locate the exported component - it will not work if the component can be exported as an arbitrarily named component. In addition, there are tools (ESLint plugin, for example) that are based on the assumption of the component being the default export.

TL;DR: the component must be the default export and this is not going to change.