Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке локальні та глобальні компоненти?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Локальні та глобальні компоненти - це два способи **реєстрації** компонентів у Vue.js, які визначають, де саме компонент можна використовувати.

---

## 1. Глобальні компоненти

**Глобальний компонент** - це компонент, який доступний **у всьому застосунку**, без необхідності імпортувати його в кожному файлі.

#### Як реєструється глобальний компонент?

У `main.js`:

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import BaseButton from './components/BaseButton.vue'

const app = createApp(App)

app.component('BaseButton', BaseButton)

app.mount('#app')
```

Тепер компонент `<BaseButton />` можна використовувати будь-де:

```javascript
<template>
  <BaseButton>Save</BaseButton>
</template>
```

---

### Плюси глобальних компонентів

- зручно, якщо це **базові, часто використовувані елементи** (кнопки, інпути, картки)
- менше імпорту в компонентах
- добре підходить для власного UI-kit компонентів

### Мінуси

- складніше зрозуміти, звідки компонент береться
- глобальний простір імен може «засмітитися»
- гірша масштабованість великих проєктів
(де сотні компонентів - локальна реєстрація краща)

---

## 2. Локальні компоненти

**Локальний компонент** - це компонент, який потрібно **явно імпортувати** в той компонент, де він буде використовуватися.

#### Як реєструється локально?

У компоненті:

```javascript
<script setup>
import UserCard from './UserCard.vue'
</script>

<template>
  <UserCard />
</template>
```

У `<script setup>` глобальна реєстрація **не потрібна**, імпорт сам реєструє компонент.

Якщо використовується звичайний `<script>`:

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

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

---

### Плюси локальних компонентів

- краще структурує проєкт
-> чітко видно, де застосовується компонент
- немає засмічення глобального простору імен
- підходить для великих застосунків
- легше підтримувати, рефакторити й тестувати

### Мінуси

- потрібно імпортувати вручну щоразу
- трохи більше коду, але в SFC/Vite це майже не відчувається

---

## Коли використовувати глобальні, а коли локальні?

#### Глобальні - коли:

- компонент використовується **всюди**
- це **базовий UI-компонент** (кнопка, іконка, інпут)
- ви робите власний UI-kit

Приклади:

```javascript
BaseButton
BaseInput
BaseModal
AppIcon
```

#### Локальні - коли:

- компонент потрібен лише в певному місці
- він занадто специфічний
- він не є частиною UI-бібліотеки

Приклади:

```javascript
UserCard
TodoItem
LoginForm
RoadmapNode
```

---

## Підсумок (шпаргалка)

| Тип компонента | Де доступний | Як підключається | Коли використовувати |
|---|---|---|---|
| **Глобальний** | У всьому застосунку | `app.component('Name', Comp)` | Часто використовувані базові компоненти |
| **Локальний** | Тільки в одному компоненті | `import Comp from ''` | Більшість компонентів застосунку |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати371 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.