Можно ли экспортировать два объекта из одного компонента Vue.js?

Question

Я интересно, если я могу экспортировать два объекты из Vue.js компонента таким образом, что другие компоненты могут выбрать один для использования

1002 * Вот пример я работаю с:. 1004* 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>

Тогда я импортировать как Foo и Bar в 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>

То, что я ожидал увидеть на странице:

This is the about page
Foo
Bar

1013 * ... но вместо этого я вижу:

This is the about page
Foo

Так что, похоже, что это не признает Бар. Я ожидал, что смогу выбрать, какой объект импортировать, и данные этого объекта будут определять, что будет заполнено в шаблоне (поэтому текст «foo» для компонента Foo и «bar» для компонента Bar).

Есть ли способ сделать то, что я пытаюсь сделать? Спасибо.

Answer 1

Во-первых, я думаю, что это почти наверняка не очень хорошая модель. Компоненты должны быть должным образом уменьшена и инкапсулируются, и читаемым. * * * Тысяча одна тысяча две * Если, как, например, Foo и Bar были похожи, они должны быть один компонент, называемый в два раза, и с учетом различных реквизита каждый раз. С другой стороны, если они различны, то они должны быть разными компонентами

1006 * Тем не менее, для ответа на вопрос:. Vue погрузчик ожидает и требует экспорта по умолчанию содержит компонент,Это является причиной поведения вы заметили. 1010 * Другие спрашивали об этом, и Эван вас (создатель Vue) прокомментировал в этом особенность запроса . Здесь я также добавлю его комментарии:

Сам компонент должен быть экспортом по умолчанию. Это требование

1017 * Особенности как горячая замена, инъекции CSS, контекстная CSS, SSR критической коллекция CSS все зависит от возможности точно определить местонахождение экспортируемого компонента. - он не будет работать, если компонент может быть экспортирован какпроизвольно названный компонент. Кроме того, есть инструменты (ESLint плагин, например), которые основаны на предположении выбранного компонента экспорта по умолчанию

1019 * TL; DR:. Компонент должен быть экспорт по умолчанию, и это не будетизменить.

Answer 2

Один из способов деления 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>

About.vue:

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