Vue.js Components

Components are one of the most powerful features of Vue.js.

Components can extend HTML elements and encapsulate reusable code.

The component system allows us to build large-scale applications using small, independent, and reusable components. Almost any type of application interface can be abstracted into a tree of components: Note: Props are one-way bound: when the parent component's properties change, they will be passed down to the child component, but not the other way around.

Prop Validation

Components can specify validation requirements for props.

To customize prop validation, you can provide an object with validation requirements for the values in props, instead of a string array. For example:

Vue.component('my-component', {
  props: {
    // Basic type check (`null` and `undefined` will pass any type validation)
    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 default values must be obtained from a factory function
      default: function () {
        return { message: 'hello' }
      }
    },
    // Custom validation function
    propF: {
      validator: function (value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

When prop validation fails, (in the development build version) Vue will produce a console warning.

The type can be one of the following native constructors:

• String

• Number

• Boolean

• Array

• Object

• Date

• Function

• Symbol

The type can also be a custom constructor, checked with instanceof.