Vue.js component

Component is one of the most powerful features of Vue.js.

Components can extend HTML elements to encapsulate reusable code.

Component systems allow us to build large applications with independently reusable widgets. The interface of almost any type of application can be abstracted into a component tree:

Register a global component syntax as follows:

Vue.component(tagName, options )

tagName is the component name and options is the configuration option. After registration, we can call the component in the following ways:


Global Components

All instances can use global components.

Global component instance

Register a simple global component welookups and use it:

<div id="app"> <welookups></welookups> </div> <script> // registered Vue.component('welookups', { template: '<h1>Custom components!</h1>' }) // Create a root instance new Vue({ el: '#app' }) </script>

Local component

We can also register local components in the instance options so that the components can only be used in this instance:

Local component instance

Register a simple local component welookups and use it:

<div id=" app"> <welookups></welookups> </div> <script> Var Child = { Template: '<h1> Custom Components!</h1 >' } // Create a root instance New vue({ El: '#app', Components: { // <welookups> will only be available in the parent template 'welookups': Child } }) </script>

Dynamic Prop

Similar to binding HTML features to an expression with v-bind, you can also use v-bind to dynamically bind the value of props to the data of the parent component. This change is also passed to the child component whenever the data of the parent component changes:

Prop instance

<div id=" app"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg"></child> </div> </div> <script> // registration Vue.component('child', { // declare props Props: ['message'], // can also be used like "this.message" in a vm instance Template: '<span> {{ message }}</ Span>' }) // Create a root instance New vue({ El: '#app', Data: { parentMsg: 'parent component content' } }) </script>

In the following example v-bind The directive passes todo to each duplicate component:

Prop Instance

<div id="app"> <ol> <todo-item v-for="item in sites" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) new Vue({ el: '#app', data: { sites: [ { text: 'welookups' }, { text: 'Google' }, { text: 'Taobao' } ] } }) </script>

Note: prop is bound in one direction: when the properties of the parent component change, it is passed to the child component, but not vice versa.

Prop verification

Components can specify validation requirements for props.

prop is an object rather than an array of strings, it contains validation requirements:

Vue.component('example', {
  Props: {
    // Basic type detection (`null` means any type)
    propA: Number,
    // Multiple types
    propB: [String, Number],
    // must pass and be a string
    propC: {
      Type: String,
      Required: true
    // number, with default values
    propD: {
      Type: Number,
      default:  100
    // The default value of the array/object should be returned by a factory function
    propE: {
      Type: Object,
      default:  Function () {
        return { Message: 'hello' }
    // Custom verification function
    propF: {
      Validator: function (value) {
        return value > 10

type can be the following native constructor:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array

type can also be a custom constructor, using instanceof detection.

Custom Event

The parent component uses props to pass data to the child component, but if the child component wants to pass the data back, you need to use a custom event!

We can use v-on to bind custom events, and each Vue instance implements the Events interface, ie:

  • Use $on(eventName) to listen for events
  • Trigger events using $emit(eventName)

welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.