Vue Academy · Урок

Создание и регистрация компонентов

Определяйте и регистрируйте компоненты глобально и локально

«Создание и регистрация компонентов» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Зачем нужны компоненты

Компоненты позволяют разделить пользовательский интерфейс на независимые и повторно используемые части.

Каждый компонент управляет собственным шаблоном, логикой и стилями
Вы объединяете их в более крупные структуры
Они помогают сделать код организованным и удобным для сопровождения

Однофайловые компоненты

Однофайловый компонент (.vue) объединяет три блока в одном файле.

<template>
  <p>{{ greeting }}</p>
</template>

<script setup>
import { ref } from "vue"
const greeting = ref("Hello!")
</script>

<style scoped>
p { color: teal; }
</style>

Определение компонента

Блок template содержит разметку. Блок script содержит логику. Блок style содержит CSS.

Стили с атрибутом scoped применяются только к этому компоненту
Шаблоны должны иметь чёткую структуру элементов

Имена компонентов

По соглашению имена файлов компонентов и способы их использования записывают в формате PascalCase.

Файл: UserCard.vue
В шаблонах: <UserCard />
PascalCase отличает компоненты от встроенных элементов HTML

Импорт компонента

Чтобы использовать компонент, импортируйте его там, где он нужен.

<script setup>
import UserCard from "./components/UserCard.vue"
</script>

<template>
  <UserCard />
</template>

Локальная регистрация (script setup)

При использовании script setup достаточно импортировать компонент: после этого он становится доступен в шаблоне. Дополнительная регистрация не требуется.

<script setup>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
</script>

<template>
  <Header />
  <main>Content</main>
  <Footer />
</template>

Локальная регистрация (Options API)

В Options API компоненты регистрируются в параметре components.

import UserCard from "./UserCard.vue"

export default {
  components: {
    UserCard
  }
}

// Now <UserCard /> works in this template

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

Глобальная регистрация с помощью app.component делает компонент доступным везде без импорта.

import { createApp } from "vue"
import App from "./App.vue"
import BaseButton from "./components/BaseButton.vue"

const app = createApp(App)
app.component("BaseButton", BaseButton)
app.mount("#app")

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

Выбор области регистрации:

Глобальная регистрация удобна, но увеличивает размер сборки и усложняет отслеживание использования
Локальная регистрация использует явные импорты, эффективнее удаляет неиспользуемый код и делает зависимости понятнее

Предпочитайте локальную регистрацию, кроме нескольких действительно универсальных базовых компонентов.

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

Один и тот же компонент можно использовать много раз. Каждый экземпляр независим.

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

<!-- three separate instances,
     each with its own state -->

Вложенные компоненты

Компоненты образуют дерево. Родитель может содержать дочерние компоненты, которые, в свою очередь, содержат собственные дочерние компоненты.

<!-- App.vue -->
<template>
  <PageLayout>
    <ArticleList />
  </PageLayout>
</template>

<!-- ArticleList contains ArticleCard children -->

Быстрая проверка

Проверьте, насколько хорошо Вы поняли регистрацию компонентов.

Итоги: создание компонентов

Вы научились создавать и регистрировать компоненты:

Файлы .vue содержат шаблон, скрипт и стили
Используйте имена в формате PascalCase
script setup автоматически регистрирует импортированные компоненты
Options API использует параметр components
app.component() регистрирует компонент глобально

Далее: входные параметры и пользовательские события.

Часто задаваемые вопросы

Урок «Создание и регистрация компонентов» бесплатный?

Да — полный текст урока «Создание и регистрация компонентов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Создание и регистрация компонентов»?

Определяйте и регистрируйте компоненты глобально и локально Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «Создание и регистрация компонентов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy