Что такое props?vue-26

Определение props

Props (properties) — это специальные атрибуты, которые:

  1. Передают данные от родительских компонентов к дочерним
  2. Обеспечивают односторонний поток данных (parent → child)
  3. Являются основным механизмом коммуникации между компонентами
  4. Должны быть явно объявлены в компоненте-получателе

Основные характеристики props

  1. Однонаправленность данных: Родитель влияет на дочерний компонент, но не наоборот
  2. Иммутабельность: Дочерний компонент не должен изменять полученные props (используйте data или computed для производных значений)
  3. Типизация: Можно задавать ожидаемые типы данных
  4. Валидация: Возможность проверки входящих значений

Синтаксис объявления props

Вариант 1: Простой массив строк

props: ['title', 'likes', 'isPublished']

Вариант 2: Объект с валидацией

props: {
  // Базовая проверка типа
  title: String,

  // Несколько допустимых типов
  likes: [String, Number],

  // Обязательное поле с типом Number
  commentCount: {
    type: Number,
    required: true
  },

  // Значение по умолчанию
  isPublished: {
    type: Boolean,
    default: false
  },

  // Пользовательская валидация
  author: {
    validator(value) {
      return ['Иван', 'Мария', 'Петр'].includes(value)
    }
  }
}

Передача props

Статические значения

<blog-post title="Мой первый пост"></blog-post>

Динамические значения

<blog-post :title="post.title" :likes="post.likes"></blog-post>

Передача всех свойств объекта

<blog-post v-bind="post"></blog-post>

Эквивалентно:

<blog-post :id="post.id" :title="post.title"></blog-post>

Особенности работы с props

  1. Именование: В HTML используйте kebab-case, в JS — camelCase

    <blog-post post-title="Привет"></blog-post>

    props: ['postTitle']

  2. Изменение props: Прямое изменение props вызывает предупреждение. Вместо этого:

    • Используйте локальное data-свойство
    • Используйте computed-свойство
    • Генерируйте событие для родителя

  3. Не-пропсовые атрибуты: Автоматически добавляются к корневому элементу компонента (можно отключить через inheritAttrs: false)

Пример полного компонента с props

<template>
  <div class="user-card">
    <h2>{{ fullName }}</h2>
    <p>Возраст: {{ age }}</p>
    <p v-if="isPremium">Премиум пользователь</p>
  </div>
</template>

<script>
export default {
  name: 'UserCard',
  props: {
    firstName: {
      type: String,
      required: true
    },
    lastName: {
      type: String,
      default: ''
    },
    age: {
      type: Number,
      validator: value => value >= 0
    },
    isPremium: Boolean
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`.trim()
    }
  }
}
</script>

<style scoped>
.user-card {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}
</style>

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

<template>
  <user-card
    :first-name="user.firstName"
    :last-name="user.lastName"
    :age="user.age"
    :is-premium="user.isPremium"
  />
</template>

<script>
import UserCard from './UserCard.vue'

export default {
  components: { UserCard },
  data() {
    return {
      user: {
        firstName: 'Иван',
        lastName: 'Петров',
        age: 30,
        isPremium: true
      }
    }
  }
}
</script>

Резюмируем:

Props — это механизм передачи данных от родительских компонентов к дочерним с возможностью типизации и валидации, обеспечивающий четкий односторонний поток данных и предсказуемость работы компонентов.

Вопросы

Собеседования