Валидация входных параметров

Компоненты могут указывать требования к своим входным параметрам, такие как определение типа. Если эти требования не выполнены — Vue предупредит сообщением в JavaScript-консоли браузера. Это особенно полезно при разработке компонента, который предназначен для использования другими.

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

Например:

Vue.component('my-component', {
  props: {
    // Просто проверка типа (`null` и `undefined` проходят проверку для любого типа)
    propA: Number,
    // Несколько допустимых типов
    propB: [String, Number],
    // Обязательное значение строкового типа
    propC: {
      type: String,
      required: true
    },
    // Число со значением по умолчанию
    propD: {
      type: Number,
      default: 100
    },
    // Объект со значением по умолчанию
    propE: {
      type: Object,
      // Для объектов или массивов значения по умолчанию
      // должны возвращаться из функции
      default: function () {
        return { message: 'hello' }
      }
    },
    // Пользовательская функция для валидации
    propF: {
      validator: function (value) {
        // Значение должно соответствовать одной из этих строк
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

Когда валидация входного параметра заканчивается ошибкой — Vue выдаст предупреждение в консоли (если используется сборка для разработки).

Входные параметры валидируются перед созданием экземпляра компонента, поэтому свойства экземпляра (например, data, computed и т.д.) не будут доступны внутри default или функций validator.

Проверка типа

Значением type может быть один из следующих нативных конструкторов:

• String

• Number

• Boolean

• Array

• Object

• Date

• Function

• Symbol

Кроме того, type также может быть пользовательской функцией-конструктором и валидация будет выполняться проверкой с помощью instanceof. Например, если существует следующая функция-конструктор:

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

Вы можете использовать:

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

чтобы проверить, что значение входного параметра author было создано с помощью new Person.