时间戳

首页 > 解决方案 > 我可以从一个 Vue.js 组件中导出两个对象吗？

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>

然后我在 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”）。

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

标签： javascriptvue.jsvuejs2es6-modules

解决方案

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

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

尽管如此，为了回答这个问题： Vue 加载器期望并需要默认导出来包含组件。这就是您注意到的行为的原因。

其他人对此提出了疑问，Evan You（Vue 的创建者）在此功能请求中发表了评论。我也会在这里包括他的评论：

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

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

TL;DR：组件必须是默认导出，这不会改变。

推荐阅读