\n\n\n```\n\nРодитель:\n\n```vue\n\n```\n\nБез `:` / `v-bind` значение — строковый литерал; с двоеточием — выражение JavaScript.\n\n## Важные правила\n\n- Props **только для чтения** с точки зрения ребёнка: прямая мутация — антипаттерн и warning в development.\n- Нужна локальная копия — `ref`/`data` с начальным значением из prop; производное значение — `computed`.\n- В шаблоне часто kebab-case (`user-name`), в скрипте — camelCase (`userName`).\n- Объекты и массивы передаются по ссылке: мутация вложенных полей у родителя тоже «протекает» — лучше эмитить новый объект.\n\n## На собеседовании\nОжидают one-way data flow и пару к emit: props вниз, события вверх. Плюс отличие статического атрибута от `:bound`.\n\n## Итог\nProps — декларативный контракт входа. Без понимания «не мутировать» легко сломать источник истины в родителе."}}}

Что такое props в Vue?

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

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

Суть

Props — входные параметры компонента: родитель передаёт данные вниз, и они становятся свойствами экземпляра ребёнка. Это основной канал «сверху вниз» в дереве компонентов.

Как объявляют

В Options API — массив или объект с типами; в <script setup> — defineProps.

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

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

Родитель:

<TodoItem title="Изучить Vue" :count="items.length" />

Без : / v-bind значение — строковый литерал; с двоеточием — выражение JavaScript.

Важные правила

Props только для чтения с точки зрения ребёнка: прямая мутация — антипаттерн и warning в development.
Нужна локальная копия — ref/data с начальным значением из prop; производное значение — computed.
В шаблоне часто kebab-case (user-name), в скрипте — camelCase (userName).
Объекты и массивы передаются по ссылке: мутация вложенных полей у родителя тоже «протекает» — лучше эмитить новый объект.

На собеседовании

Ожидают one-way data flow и пару к emit: props вниз, события вверх. Плюс отличие статического атрибута от :bound.

Итог

Props — декларативный контракт входа. Без понимания «не мутировать» легко сломать источник истины в родителе.

Загрузка…