В Vue компонент — это переиспользуемый и изолированный блок пользовательского интерфейса (UI), который инкапсулирует разметку (HTML), логику (JavaScript) и стили (CSS), относящиеся к определённой части приложения. Компоненты являются основной строительной единицей при разработке во Vue и позволяют разбивать интерфейс на небольшие независимые части, что делает код более читаемым, поддерживаемым и масштабируемым.

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

Каждый компонент в Vue обычно состоит из трёх основных блоков:

<template>
<!-- HTML-разметка -->
</template>
<script>
export default {
// Логика компонента
}
</script>
<style>
/\* Стили (можно с модификатором scoped) \*/
</style>

Эта структура используется в однофайловых компонентах (Single File Component, .vue-файлы), особенно в проектах, созданных через Vue CLI или Vite.

Компоненты и экземпляры

Каждый компонент во Vue — это расширение корневого экземпляра Vue. По сути, корневой экземпляр приложения new Vue({}) — тоже компонент. Когда вы создаёте новый компонент, вы расширяете функциональность Vue и можете использовать его так же, как стандартные HTML-элементы.

Локальная и глобальная регистрация компонентов

Глобальная регистрация

Компонент доступен во всём приложении:

Vue.component('MyComponent', {
template: '<div>Привет из компонента!</div>'
});

Теперь его можно использовать как HTML-тег:

<my-component></my-component>

Локальная регистрация

Компонент доступен только внутри другого компонента:

import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
}

Использование компонентов

Вы можете вставлять компоненты внутрь других компонентов, создавая иерархию. Это называется композиция компонентов.

Пример:

<template>
<div>
<HeaderComponent />
<MainContent />
<FooterComponent />
</div>
</template>
<script>
import HeaderComponent from './Header.vue';
import MainContent from './Main.vue';
import FooterComponent from './Footer.vue';
export default {
components: {
HeaderComponent,
MainContent,
FooterComponent
}
}
</script>

Передача данных в компоненты (props)

Props позволяют передавать данные от родителя к дочернему компоненту:

Родитель:

<user-card :name="userName" />

Дочерний компонент:

props: \['name'\]

или

props: {
name: {
type: String,
required: true
}
}

В шаблоне:

<p>Привет, {{ name }}</p>

Отправка событий из компонентов (emit)

Чтобы передать данные от дочернего компонента к родителю, используется механизм событий:

this.$emit('myEvent', someData);

Родитель:

<child-component @myEvent="handleEvent" />

Двусторонняя привязка (v-model в компонентах)

Компонент может поддерживать v-model, если он:

1. Принимает value как prop.

2. Эмитит input:

props: \['value'\],
methods: {
updateValue(newVal) {
this.$emit('input', newVal);
}
}

Реактивность внутри компонентов

Компоненты имеют своё собственное реактивное состояние, которое изолировано от других. Это означает, что данные и методы внутри компонента не влияют напрямую на другие компоненты, если только они не передаются через props, events или глобальные хранилища (например, Vuex или Pinia).

Слот (slot)

Слоты позволяют вставлять произвольное содержимое в компонент:

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

Использование:

<card>
<p>Это текст, который попадёт внутрь компонента card</p>
</card>

Также есть именованные и scoped-слоты.

Динамические компоненты

Можно отрисовывать компоненты динамически с помощью <component :is="componentName" />

<component :is="currentComponent" />

Это полезно для вкладок, переключателей и подобного функционала.

Scoped стили

Чтобы стили не "протекали" за пределы компонента, можно использовать scoped:

<style scoped>
.card {
border: 1px solid black;
}
</style>

Асинхронные компоненты

Vue поддерживает динамическую загрузку компонентов (ленивую):

const AsyncComponent = () => import('./MyComponent.vue');

Жизненный цикл компонентов

Компоненты имеют свой жизненный цикл — набор хуков, которые вызываются на разных этапах:

• beforeCreate, created

• beforeMount, mounted

• beforeUpdate, updated

• beforeUnmount, unmounted

Эти хуки позволяют выполнять действия при создании, отображении, обновлении и удалении компонента.

Архитектура на основе компонентов

Vue поощряет архитектуру на основе компонентов, где каждый UI-элемент — это независимый компонент: кнопки, формы, карточки, модальные окна, страницы и т.п. Это помогает:

• Делить код на маленькие логические блоки.

• Повторно использовать элементы в разных местах.

• Тестировать и отлаживать отдельные компоненты.

Такой подход особенно удобен при командной разработке и масштабировании проектов.