Несколько компонентов в одном файле

Иногда вам просто нужен небольшой компонент на Vue.js, который не стоит и не хочется выносить в отдельный файл. Решение - использовать несколько компонентов в одном файле!

Пример создание нескольких компонентов:

// мини копонент item
const AvatarComponent = {
  // Обычное создание компонента, но через const
  data() {
    //...
  },
  computedProps: {
    //...
  },
  template: `<img src="..."/>`
};

// Главный компонент по типу User.vue
export default {
  components: { AvatarComponent },
  // ...
};

Это идеально подходит для повторного использования кода в компоненте, где v-for не работает.

Однако, если код более сложный или, вероятно, будет использоваться другими компонентами, создание многоразового компонента - лучший способ.

Экспорт нескольких компонентов Vue

Чтобы экспортировать несколько компонентов на vue нужно добавить ключевое слово export:

export const AvatarComponent = {
  data() {
    //...
  },
  computedProps: {
    //...
  },
  template: `<img src="..."/>`
};

А вот чтобы импортировать это, вам придется использовать немного другой синтаксис:

import UserComponent, { AvatarComponent } from './MultipleComponentsInOneFile.vue';