Могу ли я экспортировать два объекта из одного компонента 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>

Затем я импортирую 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

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

This is the about page
Foo

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

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


javascript vue.js vuejs2 es6-modules
person gib65    schedule 22.12.2019    source источник
comment
Если у aboutfoobar есть реквизит, почему бы вам просто не прислать разные реквизиты для каждого из них?   -  person depperm    schedule 22.12.2019

Ответы (2)


arrow_upward
4
arrow_downward

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

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

Тем не менее, чтобы ответить на вопрос: загрузчик Vue ожидает и требует экспорта по умолчанию в содержат компонент. Это причина того поведения, которое вы заметили.

Другие спрашивали об этом, и Эван Ю (создатель Vue) прокомментировал этот запрос функции < / а>. Я также включу сюда его комментарии:

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

Такие функции, как «горячая» замена модуля, внедрение CSS, CSS с ограниченным диапазоном, критически важная коллекция CSS для SSR, все зависят от возможности точно определить местонахождение экспортируемого компонента - это не будет работать, если компонент можно экспортировать как компонент с произвольным именем. Кроме того, существуют инструменты (например, плагин ESLint), которые основаны на предположении, что компонент является экспортируемым по умолчанию.

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

person Dan    schedule 22.12.2019
comment
Я полностью согласен насчет реквизита. Я просто экспериментирую с экспортом, пытаюсь понять, как он работает в vue.js. Это ответ на мой вопрос. - person gib65; 22.12.2019

arrow_upward
4
arrow_downward

Один из способов разделения 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>
person m_nakano    schedule 22.12.2019