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

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

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

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

Контент

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

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

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

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

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

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

Простіше кажучи:
**Компонент - це самостійний шматок UI зі своєю логікою і станом.**

---

## Із чого складається компонент?

У сучасному Vue (Vue 3) компонент зазвичай пишеться як **Single File Component (SFC)** - це файл `.vue`, що складається з 3 блоків:

```javascript
<template>
  <button @click="count++">
    Натиснуто {{ count }} разів
  </button>
</template>

#### 1. `<template>`

Описує **розмітку**, тобто як компонент виглядає.

#### 2. `<script setup>`

Описує **логіку компонента**:

- дані (state),
- методи,
- обчислювані властивості,
- події,
- імпорти тощо.

#### 3. `<style>`

Стилі компонента.
`scoped` означає, що стилі застосовуватимуться лише всередині цього компонента.

---

## Чому компоненти важливі?

#### Повторне використання

Одного разу створив кнопку - вставляєш її будь-де:

```javascript
<MyButton />
```

#### Легке тестування і підтримка

Кожен компонент - маленька незалежна частина застосунку.

#### Локальний стан

Компонент зберігає свою копію даних:

```javascript
const counter = ref(0)
```

Кожен екземпляр компонента матиме свій стан.

#### Ізоляція логіки

Компонент сам вирішує, що він робить і як.

---

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

#### Локально в SFC (найчастіший спосіб)

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

<template>
  <MyButton />
</template>
```

#### Глобально

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

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

---

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

**Counter.vue**

```javascript
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

const count = ref(0)

function increment() {
  count.value++
}
</script>
```

Використання:

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

---

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

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

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

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

Для рев’юера

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

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