Як зареєструвати локальний компонент?

VueMiddle~1 хв читання

Спосіб №1: через `<script setup>` (сучасний і найзручніший)

У режимі <script setup> імпорт автоматично реєструє компонент, ніякого додаткового налаштування не потрібно.

Приклад:

javascript

<!-- Parent.vue -->
<script setup>
import UserCard from './UserCard.vue'
</script>

<template>
  <UserCard />
</template>

Готово - компонент зареєстровано локально.

Це найпопулярніший спосіб у сучасних проєктах на Vue 3.

Спосіб №2: через звичайний `<script>` (Options API або Composition API без setup)

Якщо ти не використовуєш <script setup>, потрібно явно вказати компонент в опції components.

Приклад (Composition API без setup):

javascript

<script>
import UserCard from './UserCard.vue'

export default {
  components: {
    UserCard,
  },
}
</script>

<template>
  <UserCard />
</template>

Приклад (Options API):

javascript

<script>
import ProductItem from './ProductItem.vue'

export default {
  name: "ProductList",

  components: {
    ProductItem,
  },
}
</script>

<template>
  <ProductItem />
</template>

Який спосіб обрати?

Використовуй `<script setup>`, якщо:

проєкт на Vue 3
хочеш писати менше коду
хочеш більш читабельні компоненти

Використовуй `components: {}` лише якщо:

проєкт успадковує старий стиль Vue 2
потрібна сумісність з кодом Options API

Підсумок (коротко)

Локальна реєстрація компонента у Vue 3:

У `<script setup>`:

javascript

<script setup>
import MyComponent from './MyComponent.vue'
</script>

У звичайному `<script>`:

javascript

components: {
  MyComponent
}

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.