Рубрики
Без рубрики

Лучший способ подтвердить реквизиты в Vue

Лучший способ подтвердить реквизиты в Vue

Автор оригинала: Varit J Patel.

Оригинальный пост Dev.to.

Что ж, всякий раз, когда мы общаемся с данными, нам нужно проверить данные, чтобы добиться ожидаемого поведения, и их применяются к любому типу связи, которое происходит в приложении, и когда дело доходит до общения от родителей к ребенку, используя реквизит не исключение.

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

  • Массивный синтаксис
  • Синтаксис объекта
  • Синтаксис объекта с пользовательским валидатором

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

Родительский компонент

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

Array Syntax

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

export default {
  name: 'MovieList',
  props: ['name', 'image', 'rating', 'watchlist']
}

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

Господин

  • Нет проверки типа
  • Информация не указывает на обязательные и необязательные реквизиты
  • Нет значения по умолчанию
  • Нет соответствующего пользовательского валидатора

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

Объектный синтаксис

Альтернативный синтаксис массива, реквизиты также могут быть определены с синтаксисом объекта, и этот синтаксис может облегчить нас использовать три ключевых свойства с атрибутами SPROP, которые помогают нам написать лучший код.

  1. Тип Проверяет тип данных опоры.
  2. Требуется Указывает, требуется ли опоры или нет.
  3. по умолчанию Указывает значение опоры, если родительский компонент не удался пройти этот опорой.
export default {
  name: "MovieList",
  props: {
    name: {
      type: String,
      required: true
    },
    rating: {
      type: [Number, String],
      required: false,
      default: 5
    },
    wishlist: {
      type: Boolean,
      default: false
    },
    image: {
      type: String,
      default: require("@/assets/default-poster.png")
    }
  }
};

Ниже приведены вещи, которые мы можем заметить из вышеуказанного кода.

  • Реквиты теперь поддерживают типы. Список доступных типов включает в себя некоторые типы данных JavaScript, и другие находятся ниже.

    • Нить
    • Число
    • Объект
    • Множество
    • Логический
    • Дата
    • Функция
    • Символ

  • Опора может принимать несколько типов данных, используемых в Рейтинг пропры

  • Требуемые реквизиты могут быть легко идентифицированы.

  • Значение по умолчанию используется в случае, когда родитель не удалось пропустить опоры.

  • Если собственность по умолчанию установлено, требуемые свойства становятся истинными, поэтому даже не пишет, имеет смысл. (например, список желаний и образа)

Таким образом, проп с синтаксисом объекта намного лучше, чем синтаксис массива, поскольку он преодолевает много минусов, которые поставляются с синтаксисом объекта, который мы обсуждали выше. Но все же, есть улов в коде с изображением образа.

Представьте себе, родительский компонент как-то передал URL-адрес изображения.

Для того, чтобы справиться с такими случаями, опора С синтаксисом объекта есть другое свойство под названием Валидатор Для подтверждения входящего опоры и если наше требование для опоры не совпадает, он бросает ошибку. Таким образом, это помогает написать более надежный и масштабируемый код. Давайте пройдемся через пример ниже

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

export default {
  props: {
    image: {
      type: String,
      default: require("@/assets/default-poster.png"),
      validator: propValue => {
        const hasImagesDir = propValue.indexOf("@/assets/") > -1;
        const listOfAvailableExt = [".jpeg", ".jpg", ".png"];
        const isValidExt = listOfAvailableExt.some(ext =>
          propValue.endsWith(ext)
        );
        return hasImagesDir && isValidExt;
      }
    }
  }
}

Здесь Валидатор Функция принимает значение SPOP, и если значение передает заданные проверки, то изображение SPOP видно, иначе он будет бросить ошибку в консоли, как показано ниже.

[Vue warn]: Invalid prop: custom validator check failed for prop "image".

Теперь мы можем просто исправить путь изображения, который отображает правильное изображение.

Вот работа CodeSandbox.

{% CodeSandbox J5SS7%}

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

Я надеюсь, что это поможет написать лучший код.

Не стесняйтесь публиковать какие-либо вопросы 📝 на комментариях ниже. Я был бы более чем рад ответить на них.

Читайте ещё по теме: