Props и их валидация

В Vue.js props — это механизм передачи данных от родительского компонента к дочернему. Они позволяют компонентам быть гибкими и повторно используемыми, обеспечивая динамическую конфигурацию.

Объявление props

Props объявляются в объекте props внутри компонента:

export default {
  props: ['title', 'count']
}

Здесь title и count будут доступны внутри компонента через this.title и this.count. Такой синтаксис простой, но не обеспечивает строгой валидации и указания типов.

Более гибкий способ — объявление props через объект с настройками:

export default {
  props: {
    title: {
      type: String,
      required: true,
      default: 'Без названия'
    },
    count: {
      type: Number,
      default: 0,
      validator: value => value >= 0
    }
  }
}

Ключевые моменты:

  • type — задает ожидаемый тип данных (String, Number, Boolean, Array, Object, Function, Symbol).
  • required — делает prop обязательным для передачи.
  • default — задает значение по умолчанию, если родитель не передал проп.
  • validator — функция для пользовательской валидации значения.

Типы данных и строгая проверка

Vue.js автоматически проверяет тип данных при разработке в режиме development. Если переданный prop не соответствует ожидаемому типу, выводится предупреждение в консоль.

props: {
  isActive: Boolean,
  items: Array,
  callback: Function
}

Типы можно комбинировать:

props: {
  id: [String, Number]
}

В этом случае проп id может быть либо строкой, либо числом.

Валидация с помощью validator

Validator — функция, которая принимает значение пропа и возвращает true, если оно корректно. Это полезно для проверки диапазонов, форматов или сложных условий:

props: {
  rating: {
    type: Number,
    validator: value => value >= 0 && value <= 5
  }
}

При попытке передать число вне диапазона консоль выдаст предупреждение.

Props с объектами и массивами

При передаче объектов и массивов важно помнить про реактивность:

props: {
  user: Object
}

Если внутри дочернего компонента нужно модифицировать объект или массив, лучше работать с копией:

data() {
  return {
    localUser: { ...this.user }
  }
}

Иначе изменения будут влиять на родительский компонент, что нарушает однонаправленный поток данных.

Передача props и реактивность

Props передаются в шаблон компонента через директорию или вложенные компоненты:

<ChildComponent :title="parentTitle" :count="parentCount" />

Символ : перед именем пропа указывает на привязку динамического значения. Это обеспечивает реактивность: при изменении parentTitle дочерний компонент автоматически обновит отображаемое значение.

Props и слоты

Иногда props используются вместе со слотами для более сложной кастомизации:

<ChildComponent :title="parentTitle">
  <template #footer>
    Дополнительная информация
  </template>
</ChildComponent>

Это позволяет передавать как данные, так и разметку, сохраняя при этом реактивность props.

Деструктуризация props

В setup-функции Composition API props можно деструктурировать:

export default {
  props: {
    name: String,
    age: Number
  },
  setup(props) {
    const { name, age } = props
    return { name, age }
  }
}

Важно помнить: деструктурированные props не сохраняют реактивность, если использовать их напрямую. Для сохранения реактивности следует использовать toRefs:

import { toRefs } from 'vue'

setup(props) {
  const { name, age } = toRefs(props)
  return { name, age }
}

Передача пропсов по умолчанию и динамическая типизация

Props можно передавать через объект с вычисляемыми значениями и методами:

<ChildComponent :title="computedTitle" :count="getCount()" />

Это позволяет комбинировать реактивные вычисления с пропсами, создавая гибкие и динамичные компоненты.

Props — фундаментальная часть архитектуры Vue.js, обеспечивающая однонаправленный поток данных, строгую типизацию и контроль значений через валидаторы. Правильное использование props делает компоненты предсказуемыми, повторно используемыми и безопасными для масштабирования приложений.

Оглавление