Какие возможные типы пропсов в Vue?

В Vue, пропсы (props) используются для передачи данных от родительского компонента к дочернему. Пропсы могут иметь разные типы, и правильно определяя их, вы можете улучшить читаемость, поддержку и надежность вашего приложения.

Основные типы пропсов

1. Типы данных
   Vue поддерживает несколько базовых типов для пропсов, включая:
   • String: строка
   • Number: число
   • Boolean: булевый тип
   • Array: массив
   • Object: объект
   • Function: функция
   • Symbol: символ (в некоторых версиях)
   
   Пример определения пропсов с использованием разных типов:

   <template>
     <div>
       <h1>{{ title }}</h1>
       <p>{{ count }}</p>
       <p v-if="isActive">Активно</p>
     </div>
   </template>
   
   <script>
   export default {
     props: {
       title: {
         type: String,
         required: true
       },
       count: {
         type: Number,
         default: 0
       },
       isActive: {
         type: Boolean,
         default: false
       }
     }
   }
   </script>
   

2. Обязательные пропсы
   Вы можете указать, что пропс является обязательным, добавив required: true в его определение. Если родительский компонент не передает обязательный пропс, Vue выдаст в консоли предупреждение.
3. Значения по умолчанию
   Вы можете задать значения по умолчанию для пропсов. Это можно сделать, вернув значение в поле default если оно не предоставлено.
4. Кастомные валидаторы
   Вы можете создать собственные функции для валидации пропсов. Эта функция должна возвращать true, если пропс валиден, и false в противном случае.
   Пример кастомного валидатора:

   props: {
     user: {
       type: Object,
       required: true,
       validator: function(value) {
         return value.hasOwnProperty('name') && value.hasOwnProperty('age');
       }
     }
   }
   

Пример использования пропсов

Предположим, что у вас есть компонент UserCard, который принимает информацию о пользователе. Вы можете определить его так:

<template>
  <div class="user-card">
    <h2>{{ user.name }}</h2>
    <p>Возраст: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      required: true,
      default: () => ({ name: 'Аноним', age: 0 })
    }
  }
}
</script>

И в родительском компоненте вы можете использовать его следующим образом:

<template>
  <div>
    <UserCard :user="{ name: 'Иван', age: 30 }" />
  </div>
</template>

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

export default {
  components: {
    UserCard
  }
}
</script>

Заключение

Зная, какие типы пропсов вы можете использовать, и как правильно их настраивать, вы сможете создавать более удобочитаемые и надежные компоненты. Главное — следите за тем, чтобы ваши пропсы всегда имели правильные типы данных и доступные значения по умолчанию, если это необходимо. Это улучшит ваше приложение и сделает его более удобным для использования и расширения.