Frontend Academy · Урок

Props и события компонентов

Передавайте данные вниз с помощью defineProps, отправляйте события вверх через defineEmits и проверяйте props ограничениями type и required.

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

Свойства props во Vue 3

Свойства props передают данные от родителя к потомку. В <script setup> используйте defineProps(), чтобы объявить их. В дочернем компоненте props доступны только для чтения — никогда не изменяйте их напрямую.

<script setup lang="ts">
const props = defineProps<{
  title: string;
  count?: number;
  variant?: 'primary' | 'secondary';
}>();
</script>

<template>
  <h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>

withDefaults для значений props по умолчанию

Оберните defineProps() в withDefaults(), чтобы задать значения по умолчанию.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  count?: number;
  variant?: 'primary' | 'secondary';
}>(), {
  count: 0,
  variant: 'primary'
});
</script>

Передача props в шаблоне

Передавайте статические значения как обычные атрибуты. Динамические значения передавайте с помощью v-bind (:). Логические атрибуты передавайте как наличие атрибута, без значения.

<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />

Эмиссия событий — связь от потомка к родителю

Дочерние компоненты передают данные родителю, генерируя события. Используйте defineEmits(), чтобы объявить события, которые может генерировать компонент, а затем вызывайте возвращаемую функцию emit.

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string];
  close: [];
  submit: [data: FormData];
}>();

function handleSubmit(data: FormData) {
  emit('submit', data); // fire the event
}
</script>

Обработка событий emits в родителе

Используйте @eventName в шаблоне, чтобы обрабатывать пользовательские события дочерних компонентов.

<SearchInput
  @update="searchTerm = $event"
  @submit="handleSearch"
/>

v-model с пользовательскими компонентами

v-model на пользовательском компоненте — это сокращённая запись для :modelValue + @update:modelValue. Компонент должен принимать это свойство и генерировать событие обновления.

<!-- Parent: -->
<MyInput v-model="email" />

<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>

<template>
  <input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>

Несколько привязок v-model

Vue 3 поддерживает несколько привязок v-model в одном компоненте с именованными модификаторами.

<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />

Проверка props

В Options API или при объявлении props во время выполнения добавляйте ограничения для типа, обязательности и проверки значения. Вариант defineProps() на основе TypeScript предоставляет это на этапе компиляции.

Props и данные — однонаправленный поток

Vue обеспечивает однонаправленный поток данных: props передаются от родителя к потомку, а события — от потомка к родителю. Если потомку нужно изменить данные, он генерирует событие, а родитель обрабатывает обновление.

Слоты как альтернатива props

Для содержимого, которое должно быть HTML или компонентами, а не просто данными, используйте слоты. Родитель передаёт содержимое внутри тегов компонента, а потомок отображает его с помощью <slot />.

<!-- Parent: -->
<Card title="Hello">
  <p>This content goes in the default slot.</p>
</Card>

<!-- Card.vue: -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <slot />  <!-- renders the p tag -->
  </div>
</template>

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

Как дочерний компонент Vue передаёт событие родительскому компоненту?

Повторение: props и emits

defineProps используется для типизированных объявлений props. withDefaults — для значений по умолчанию. В дочерних компонентах props доступны только для чтения. defineEmits объявляет и типизирует генерируемые события. Родитель обрабатывает события через @eventName. v-model = :modelValue + @update:modelValue. Однонаправленный поток данных: props вниз, события вверх. Слоты используются для передачи содержимого и фрагментов шаблона.

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

Урок «Props и события компонентов» бесплатный?

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

Чему я научусь в уроке «Props и события компонентов»?

Передавайте данные вниз с помощью defineProps, отправляйте события вверх через defineEmits и проверяйте props ограничениями type и required. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Props и события компонентов»?

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

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

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

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

← Назад к Frontend Academy