0Pricing
Vue Academy · Урок

defineProps и defineEmits

Типизированные свойства с defineProps (), defineEmits (), withDefaults() для значений по умолчанию

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

Обмен данными между компонентами

Компоненты получают данные через props и отправляют сообщения родителю через события. В <script setup> они объявляются с помощью макросов defineProps и defineEmits.

defineProps: вариант с декларацией во время выполнения

Можно объявить props с помощью объекта времени выполнения, как в API параметров. Это работает и в JS, и в TS.

<script setup>
const props = defineProps({
  title: String,
  count: Number
})
console.log(props.title)
</script>

defineProps с обобщённым типом TypeScript

В TypeScript передайте тип через обобщённый параметр, чтобы получить более чистые props с проверкой типов. Компилятор преобразует этот тип в объявления времени выполнения.

<script setup lang="ts">
const props = defineProps<{
  title: string
  count: number
}>()
</script>

Необязательные props с ?

Добавьте вопросительный знак к свойству в типе, чтобы сделать его необязательным. Если родитель не передаст такие props, они могут иметь значение undefined.

<script setup lang="ts">
const props = defineProps<{
  title: string
  subtitle?: string
}>()
</script>

Значения по умолчанию с withDefaults

Вариант с описанием через тип не предусматривает места для значений по умолчанию, поэтому Vue предоставляет withDefaults. Оберните defineProps и передайте объект значений по умолчанию.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string
  count?: number
}>(), {
  title: 'Untitled',
  count: 0
})
</script>

Использование props в шаблоне

Props реактивны. Ссылайтесь на них напрямую в шаблоне или обращайтесь к ним через props.x в скрипте.

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

props доступны только для чтения

Никогда не изменяйте prop внутри дочернего компонента. Props передаются в одном направлении: от родителя к дочернему компоненту. Если нужна локальная редактируемая копия, создайте её с помощью computed или локального ref.

Объявление событий с defineEmits

defineEmits объявляет события, которые может сгенерировать компонент. Вариант времени выполнения принимает массив имён событий.

<script setup>
const emit = defineEmits(['submit', 'cancel'])
function onSave() { emit('submit') }
</script>

Типизированные события с TypeScript

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

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'submit', payload: string): void
  (e: 'cancel'): void
}>()
</script>

Отправка события с данными

Вызовите emit, передав имя события и любые данные. Родитель слушает событие с помощью @submit и получает переданные данные.

<script setup lang="ts">
const emit = defineEmits<{ (e: 'submit', value: string): void }>()
function send() { emit('submit', 'hello') }
</script>

Объединяем всё вместе

Дочерний компонент получает prop title и отправляет событие submit. Родитель реагирует на оба элемента — это чистая типизированная односторонняя передача данных в сочетании с явными событиями.

<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit', v: string): void }>()
</script>

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

Проверьте, насколько хорошо Вы усвоили работу с props и событиями.

Итоги

Вы изучили ввод и вывод компонентов в <script setup>:

  • defineProps объявляет входные данные (объект времени выполнения или обобщённый тип TS).
  • Используйте ? для необязательных props, а withDefaults — для значений по умолчанию.
  • Props доступны только для чтения и передаются в одном направлении.
  • defineEmits объявляет события, для которых можно дополнительно указать типизированные имена и передаваемые данные.

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

Урок «defineProps и defineEmits» бесплатный?

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

Чему я научусь в уроке «defineProps и defineEmits»?

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

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

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

Сколько времени занимает урок «defineProps и defineEmits»?

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

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

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

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

  1. Введение в script setup
  2. defineProps и defineEmits
  3. defineExpose и useAttrs
  4. Импорт и использование компонуемых функций в script setup
← Назад к Vue Academy