Входные параметры: props

Входные параметры (props) — данные, которые родительский компонент передаёт дочернему через атрибуты. Благодаря им один компонент TodoItem может показать любую задачу: текст и состояние приходят снаружи.

Объявление props

Создайте src/components/TodoItem.vue. Параметры объявляются макросом defineProps — его не нужно импортировать, он работает только внутри <script setup>:

<!-- src/components/TodoItem.vue -->
<script setup>
const props = defineProps({
  todo: Object,
})
</script>
 
<template>
  <li>{{ todo.text }}</li>
</template>

Компонент ожидает параметр todo. В шаблоне он доступен по имени, в скрипте — как props.todo.

Передача из родителя

<!-- src/App.vue -->
<script setup>
import { ref } from 'vue'
import TodoItem from './components/TodoItem.vue'
 
const todos = ref([
  { id: 1, text: 'Купить хлеб', done: true },
  { id: 2, text: 'Позвонить Анне', done: false },
])
</script>
 
<template>
  <ul>
    <TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" />
  </ul>
</template>

На странице появится список из двух задач, и каждую выводит свой экземпляр TodoItem. Двоеточие перед todo нужно, чтобы передать объект, а не строку «todo».

Типы и значения по умолчанию

Подробная запись описывает тип, обязательность и значение по умолчанию:

<!-- src/components/TodoItem.vue -->
<script setup>
const props = defineProps({
  todo: {
    type: Object,
    required: true,
  },
  showDate: {
    type: Boolean,
    default: false,
  },
})
</script>

Если родитель не передаст todo, в консоли появится предупреждение Missing required prop: "todo". Проверка работает только в режиме разработки и помогает найти ошибку быстрее.

Имена параметров

В скрипте параметры пишут в camelCase (showDate), а в шаблоне родителя принято писать через дефис: <TodoItem :todo="todo" show-date />. Vue сопоставит эти имена сам.

Использование в скрипте

Начиная с Vue 3.5 параметры можно деструктурировать без потери реактивности:

<script setup>
import { computed } from 'vue'
 
const { todo, showDate = false } = defineProps({
  todo: Object,
  showDate: Boolean,
})
 
const label = computed(() => (todo.done ? '✓ ' : '') + todo.text)
</script>

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

Частая ошибка

Менять параметр внутри дочернего компонента: props.todo = null или count++ для числового параметра. Vue выведет предупреждение, что параметр доступен только для чтения. Данные принадлежат родителю: дочерний компонент должен сообщить ему о желаемом изменении через событие — об этом следующий урок.