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

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

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

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

Основна ідея

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

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

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

javascript

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

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<style scoped>
button {
  padding: 8px 12px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 6px;
}
</style>

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

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

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

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

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

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

Глобальні - зареєстровані через 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')

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

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 - це незалежний модуль, що об'єднує шаблон, логіку та стилі. Він описує, як частина інтерфейсу повинна виглядати та поводитися, і автоматично оновлюється при зміні даних.

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

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

Premium

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