• 02-12-2021 06:00
  • 867
  • 0

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

Иногда вам просто нужен небольшой компонент на 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';
Пост опубликовал:
user img
Евгений
Автор канала jackcoder на ютубе!

Если вам нравятся материалы на сайте, вы можете помочь. Средства пойдут на оплату сервера, на котором функционирует сайт, а также на продвижение ресурса и корм коту!

🎁 Второй курс в подарок!

Записавшись на курс по «Vue.js 3 с нуля до результата», вы получаете второй курс по «Vue.js 2» бесплатно и навсегда!

Узнать больше
Второй курс в подарок