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

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

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

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

Контент

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

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

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

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

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

### Що таке компонент у Vue.js

**Компонент** - це **самостійний, придатний до повторного використання блок інтерфейсу** у Vue.js, який об'єднує розмітку (HTML), логіку (JavaScript) та стилі (CSS).
Компоненти - це **будівельні блоки застосунку Vue**, з яких збирається весь користувацький інтерфейс.

---

## Основна ідея

Компоненти дозволяють розбити інтерфейс на **дрібні незалежні частини**, кожна з яких:

- має **свій стан** (дані);
- **реагує** на зміни цих даних;
- може **спілкуватися з іншими компонентами** (через props, події, provide/inject);
- і може бути **повторно використана** в різних місцях застосунку.

---

## Приклад простого компонента

```javascript

<template>
  <button @click="count++">Лічильник: {{ count }}</button>
</template>

Тут `Counter.vue` - повноцінний **компонент**, який:

- має **власний стан** (`count`);
- **оновлює інтерфейс реактивно**;
- **інкапсулює стилі** за допомогою `scoped`.

---

## Структура компонента

Типовий `.vue` файл (Single File Component, SFC) складається з трьох частин:

| Блок | Призначення |
|---|---|
| `<template>` | Визначає розмітку (верстку), яка буде відображатися |
| `<script>` або `<script setup>` | Містить JS-логіку (дані, методи, імпорти, події тощо) |
| `<style>` | Визначає стилі компонента (можна обмежити область дії за допомогою `scoped`) |

---

## Види компонентів

1. **Глобальні** - зареєстровані через `app.component()` і доступні всюди.

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

const app = createApp(App)
app.component('Counter', Counter)
app.mount('#app')
```

2. **Локальні** - імпортуються та оголошуються всередині іншого компонента.

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

<template>
  <Counter />
</template>
```

---

## Взаємодія між компонентами

- **Передача даних вниз:** через `props`

```javascript
<UserCard :name="user.name" />
```

- **Надсилання подій вгору:** через `emit`

```javascript
<button @click="$emit('like')">Подобається</button>
```

- **Спільний контекст:** через `provide` / `inject`
- **Глобальний стан:** через Pinia, Vuex або Composition API

---

## Чому компоненти - ключова частина Vue

- Дозволяють **структурувати код** і **спростити масштабування** проєкту;
- Забезпечують **можливість повторного використання та читабельність**;
- Роблять можливою **реактивну, модульну архітектуру**;
- Покращують **тестованість** і **підтримуваність** застосунку.

---

### Підсумок

> **Компонент у Vue.js** - це незалежний модуль, що об'єднує шаблон, логіку та стилі.
> Він описує, як частина інтерфейсу повинна виглядати та поводитися, і автоматично оновлюється при зміні даних.

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

Для рев’юера

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

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