Що може містити компонент у Vue?

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

Компонент у 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 - підключена логіка

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

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

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

Premium

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