Components can specify requirements for its props, such as the types you’ve already seen. If a requirement isn’t met, Vue will warn you in the browser’s JavaScript console. This is especially useful when developing a component that’s intended to be used by others.

 

Vue.component('my-component', {  props: {    // Basic type check (`null` matches any type)    propA: Number,    // Multiple possible types    propB: [String, Number],    // Required string    propC: {      type: String,      required: true    },    // Number with a default value    propD: {      type: Number,      default: 100    },    // Object with a default value    propE: {      type: Object,      // Object or array defaults must be returned from      // a factory function      default: function () {        return { message: 'hello' }      }    },    // Custom validator function    propF: {      validator: function (value) {        // The value must match one of these strings        return ['success', 'warning', 'danger'].indexOf(value) !== -1      }    }  }})