Interpretation of Vue component registration method

Overview

The concept of componentization gives front-end page development a clearer structure.

A component in Vue is an instance object of Vue. Therefore, the construction options of the Vue component are the same as the construction options of the new Vue() method to construct a Vue instance, and the acceptable construction options are the same. Except for root instance-specific options like el. However, Vue components must be reusable, so the data option in the construction option must be a function that returns an object.

Why can the data option be a function that returns an object to ensure the reusability of the component?

Because whether you create a Vue instance using the new Vue() method or by defining a Vue component, the operation performed is to directly assign the property values ​​in the construction options to the newly created Vue instance object. Component reuse means that Vue uses the same construction options to construct multiple Vue instance objects with the same name but different addresses. If the data option in the construction options when defining a Vue component is an object, then when the component is reused, multiple components will share a data object because the address of the data object is directly assigned to the Vue instance of the component. But if the data option when defining the component is a function, Vue will execute the function and get an object when creating the component according to the construction options. In this way, the data object is regenerated each time a Vue instance is created. Therefore, multiple components have their own data objects and will not affect each other.

In fact, when a component is registered, the construction options of the component are defined, and the corresponding Vue component instance is actually created when the component is used.

1. Global Registration

Globally registered components can be used in the Vue root instance and all child components. The registration entry is the Vue.component() function. Register once and use it at any time. The registration method is as follows:

Vue.component('my-component-name', { 
    options 
})

Here is an example:

//main.js
//This example is a project created in vue-cli. The default is an incomplete version of vue, and the template option cannot be used, so the render function is used to write component content.
Vue.component('all-test',{
  data(){
    return {
      x: 'I am a global component'
    }
  },
  render(h){
    return h('div',this.x)
  }
})

//Globally registered components can be used directly //App.vue
<template>
  <div id="app">
    <all-test />
  </div>
</template>

2. Local registration

Local registration defines the component via a plain JavaScript object. Then the component is named and registered in the components option in the Vue instance construction option.

let component = { options }

//new Vue creates the root element Vue instance new Vue({
    el: '#app'
    components:
        'my-component-name': component
    }
})

//Or register the Vue instance created by the Vue component export default {
    components:
        'my-component-name': component
    }
}

Here is an example:

//App.vue
<template>
  <div id="app">
    <all-test />
    <component-a />
    <component-b />
  </div>
</template>

<script>
let ComponentA = {
  data(){
    return {
      x: 'I am a local component A'
    }
  },
  render(h){
    return h('div',this.x)
  }
}

export default {
  name: 'App',
  components:
    'component-a': ComponentA,
    'component-b': {
        data(){
          return {
            x: 'I am a local component B'
          }
        },
        render(h){
          return h('div',this.x)
        }
    } 
  }
}
</script>

3. Local registration in the module system

In module systems such as Babel and webpack, you can use import and export to import component construction option objects or *.vue files corresponding to construction options.

//c.js
export default {
    data(){
        return {
          x: 'I am a component construction option object exported separately by the c.js file'
        }
      },
      render(h){
        return h('div',this.x)
      }
}

//D.vue
<template>
    <div>
        {{x}}
    </div>
</template>

<script>
export default {
    data(){
        return {
            x: 'I am the component exported by the D.vue file'
        }
    }
}
</script>

//App.vue
<template>
  <div id="app">
    <C />
    <D />
  </div>
</template>

import C from './c.js'
import D from './components/D.vue'

export default {
  name: 'App',
  components:
    C,
    D 
  }
}
</script>

The above is the detailed interpretation of the Vue component registration method. For more information about the Vue component registration method, please pay attention to other related articles on 123WORDPRESS.COM!