\n```\n\nProps односторонние: изменение снаружи обновит ребёнка; ребёнок не должен делать `props.count++`. Для локальных правок скопируйте в `ref` или эмитьте обновление (`v-model`). Валидация `type`/`required`/`validator` помогает ловить ошибки в dev.\n\n## Emits\n\n```vue\n\n\n```\n\nРодитель: ``. В Options API — `props`/`emits` и `this.$emit`. Объектная форма `defineEmits` с валидаторами полезен в больших командах. Имена событий лучше делать декларативными (`save`, не `clickButton`).\n\n## Итог\n\nProps = вход; emits = выходные события. Паттерн «data down, events up» — база компонентного дизайна и частый junior-вопрос на Vue-собеседованиях."}}}

Что такое props и emits?

Vue · junior · сложность 4

Войти, чтобы отмечать

Как это устроено

Во Vue данные между компонентами идут по контракту: props вниз, события (emits) вверх. Родитель передаёт входные данные, ребёнок сообщает о действиях, не мутируя props напрямую.

Props

<script setup>
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 },
})
</script>

Props односторонние: изменение снаружи обновит ребёнка; ребёнок не должен делать props.count++. Для локальных правок скопируйте в ref или эмитьте обновление (v-model). Валидация type/required/validator помогает ловить ошибки в dev.

Emits

<script setup>
const emit = defineEmits(['save', 'update:modelValue'])
function onClick() {
  emit('save', { ok: true })
}
</script>
<template>
  <button @click="onClick">Save</button>
</template>

Родитель: <Child @save="handleSave" />. В Options API — props/emits и this.$emit. Объектная форма defineEmits с валидаторами полезен в больших командах. Имена событий лучше делать декларативными (save, не clickButton).

Итог

Props = вход; emits = выходные события. Паттерн «data down, events up» — база компонентного дизайна и частый junior-вопрос на Vue-собеседованиях.

Загрузка…