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

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

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

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

Контент

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

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

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

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

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

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

У сучасних проєктах це найчастіше **SFC (Single File Component)** - файл `.vue`, який може містити такі частини:

---

## 1. **Template (шаблон)**

Описує **верстку**, тобто те, що бачить користувач.

Приклад:

```javascript
<template>
  <button @click="count++">
    Clicked {{ count }} times
  </button>
</template>
```

---

## 2. **Script** - логіка компонента

Містить:

- реактивні дані (`ref`, `reactive`),
- методи,
- обчислювані властивості,
- імпорти,
- пропси,
- події `emit`,
- життєві цикли.

Приклад (`<script setup>`):

```javascript
<script setup>
import { ref } from "vue"

const count = ref(0)
</script>
```

Компонент може містити **будь-який JS-код**, що описує його поведінку.

---

## 3. **Props** - вхідні дані

Компонент може приймати параметри від батьківського компонента:

```javascript
<script setup>
defineProps({
  title: String,
  size: {
    type: Number,
    default: 14
  }
})
</script>
```

---

## 4. **Emits** - події, що надсилаються батьківському компоненту

Потрібні, щоб повідомляти батьківський компонент про дії:

```javascript
<script setup>
const emit = defineEmits(['submit'])

function handleClick() {
  emit('submit')
}
</script>
```

---

## 5. **Slots** - передача розмітки всередину компонента

Дозволяють робити компоненти гнучкими і придатними для повторного використання:

```javascript
<template>
  <div class="card">
    <slot />
  </div>
</template>
```

---

## 6. **Життєвий цикл (Lifecycle hooks)**

Компонент може виконувати дії у певний момент:

```javascript
<script setup>
import { onMounted } from "vue"

onMounted(() => {
  console.log("Component mounted")
})
</script>
```

---

## 7. **Style (CSS)**

Стилі компонента можуть бути:

- звичайні
- scoped
- глобальні
- CSS-модулі
- SCSS/LESS

Приклад:

```javascript
<style scoped>
button {
  background: #333;
  color: white;
}
</style>
```

---

## 8. **Обчислювані властивості (computed)**

```javascript
<script setup>
import { ref, computed } from "vue"

const first = ref('Vue')
const second = ref('JS')

const full = computed(() => first.value + second.value)
</script>
```

---

## 9. **Валідація і типізація пропсів**

Vue дозволяє описати типи даних:

```javascript
defineProps({
  count: {
    type: Number,
    required: true,
  }
})
```

---

## 10. **Watchers (спостерігачі)**

Відстеження реактивних значень:

```javascript
<script setup>
import { ref, watch } from "vue"

const num = ref(0)

watch(num, (newVal) => {
  console.log(newVal)
})
</script>
```

---

## 11. **Композиційні функції (composables)**

Компонент може підключати зовнішню логіку:

```javascript
<script setup>
import useTodo from '@/composables/useTodo'
const { todos, addTodo } = useTodo()
</script>
```

---

## 12. **Child components (вкладені компоненти)**

Можна імпортувати і використовувати інші компоненти:

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

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

---

## ПІДСУМОК (шпаргалка)

Компонент у Vue може містити:

- **template** - HTML-структура
- **script** - логіка і стан
- **props** - вхідні параметри
- **emits** - події
- **computed** - обчислювані значення
- **watch** - спостерігачі
- **lifecycle hooks** - хуки життєвого циклу
- **slots** - вкладений шаблон
- **child components** - вкладені компоненти
- **styles** - стилі компонента
- **composables** - підключена логіка

Простіше кажучи:
**Компонент - це розмітка + логіка + стилі + дані, об'єднані в одному незалежному модулі.**

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

Для рев’юера

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

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