Компонент у Vue.js

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

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

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

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

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

javascript

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

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

<style scoped>
button {
  padding: 10px;
}
</style>

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>

<script setup>
import { ref } from 'vue'

const count = ref(0)

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

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

javascript

<template>
  <Counter />
</template>

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

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

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

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

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

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

Premium

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