Свойства и пользовательские события
Передавайте данные вниз через свойства и отправляйте события родительским компонентам
«Свойства и пользовательские события» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.
Взаимодействие родителя и ребёнка
Компоненты взаимодействуют в двух направлениях:
- Входные параметры передают данные от родителя к ребёнку
- События передают сообщения от ребёнка к родителю
Такой односторонний поток данных делает поведение приложений предсказуемым.
Объявление входных параметров
Дочерний компонент объявляет принимаемые входные параметры. В script setup для этого используется defineProps.
<script setup>
const props = defineProps(['title', 'count'])
</script>
<template>
<h2>{{ title }}</h2>
<p>{{ count }}</p>
</template>Входные параметры с типами
Объявите входные параметры в виде объекта, чтобы указать типы для проверки.
<script setup>
defineProps({
title: String,
count: Number,
isActive: Boolean
})
</script>Входные параметры со значениями по умолчанию и обязательными значениями
Можно отметить входные параметры как обязательные и задать им значения по умолчанию.
<script setup>
defineProps({
title: {
type: String,
required: true
},
count: {
type: Number,
default: 0
}
})
</script>Передача входных параметров от родителя
Родитель передаёт данные в виде атрибутов. Используйте :, чтобы привязать динамические значения.
<template>
<ProductCard
title="Coffee Mug"
:count="stock"
:is-active="available"
/>
</template>
<!-- static string vs bound expression -->Соглашение об именовании входных параметров
Объявляйте входные параметры в формате camelCase в JS, а в шаблонах передавайте их в формате kebab-case.
- Входной параметр JS: isActive
- Атрибут шаблона: :is-active
Vue автоматически преобразует один формат в другой.
Входные параметры доступны только для чтения
Дочерний компонент не должен напрямую изменять свои входные параметры.
- Входные параметры передаются только вниз
- Их изменение нарушает предсказуемость и вызывает предупреждения
- Чтобы изменить общие данные, отправьте событие и позвольте родителю обновить их
Объявление отправляемых событий
Дочерний компонент объявляет события, которые он отправляет, с помощью defineEmits.
<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>Отправка события
Вызовите функцию emit, чтобы отправить событие родителю, при необходимости передав ему данные.
<script setup>
const emit = defineEmits(['add'])
function handleClick() {
emit("add", { id: 1, name: "Item" })
}
</script>
<template>
<button @click="handleClick">Add</button>
</template>Отправка события в Options API
В Options API вместо этого вызывайте this.$emit.
export default {
emits: ["save"],
methods: {
onSave() {
this.$emit("save", this.formData)
}
}
}Прослушивание событий родителем
Родитель прослушивает события с помощью @event-name и получает переданные данные.
<template>
<TodoItem
:task="task"
@delete="removeTask"
@add="onAdd"
/>
</template>
<script setup>
function onAdd(item) {
console.log("Added:", item.name)
}
</script>Быстрая проверка
Проверьте, насколько хорошо Вы поняли входные параметры и события.
Итоги: входные параметры и события
Вы изучили взаимодействие компонентов:
- defineProps объявляет входные параметры с типами и значениями по умолчанию
- Входные параметры передаются вниз и доступны только для чтения
- defineEmits объявляет события
- emit("name", payload) отправляет события вверх
- Родитель прослушивает события с помощью @event
Далее: слоты и области видимости слотов.
Часто задаваемые вопросы
Урок «Свойства и пользовательские события» бесплатный?
Да — полный текст урока «Свойства и пользовательские события» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.
Чему я научусь в уроке «Свойства и пользовательские события»?
Передавайте данные вниз через свойства и отправляйте события родительским компонентам Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Свойства и пользовательские события»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Создание и регистрация компонентов
- Свойства и пользовательские события
- Слоты и области слотов