Before diving into Vue’s dynamic creation of Components, take a look at the general Component declaration format.

Components of Vue can usually be declared in two ways, either through Vue.com Ponent or Single File Components (SFC).

General component declaration and registration

// Define a global registered component named button-counter
Vue.component("button-counter", {
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'.data() {
    return {
      count: 0}}});new Vue({
  template: ` 
      
 
       
App Component
 
       
 `
}).$mount("#app");
Copy the code

In the above code we declare a component called button-counter. If you want to use it normally, you just need to write the corresponding
tag on the page. Creating a registered component globally can be done dynamically, but we must use the component in the template declaration, and this is not a good idea if all components are registered globally.

As we can see from the official documentation, we can register a component using the Vue.component(‘component-name’) method. $mount = $mount; $mount = $mount;

vm.$mount( [elementOrSelector] )

Arguments:

{Element | string} [elementOrSelector]

{boolean} [hydrating]

Returns: vm – the instance itself

Usage:

If a Vue instance didn’t receive the el option at instantiation, it will be in “unmounted” state, without an associated DOM element. vm.$mount() can be used to manually start the mounting of an unmounted Vue instance.

If elementOrSelector argument is not provided, the template will be rendered as an off-document element, and you will have to use native DOM API to insert it into the document yourself.

The method returns the instance itself so you can chain other instance methods after it.

Can we achieve our needs in this way?

Is not enough!

Why??

Because Vue.component returns a function! Instead of returning a component instance, it returns a constructor.

So this is where we actually get it. For a component declared by Vue.component, we first get its constructor from Vue.component, then new an instance of the component, and finally mount it to the HTML via $mount.

// Define a global registered component named button-counter
Vue.component("button-counter", {
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'.data() {
    return {
      count: 0}}});new Vue({
  template: ` 
      
 
       
App Component
 
        
       
 
      
 `.methods: {
    insert() {
      const ButtonCounter = Vue.component("button-counter"); // Only globally registered components can be found
      const instance = new ButtonCounter();
      instance.$mount("#insert-container");
    }
  }
}).$mount("#app");
Copy the code

In the code above, Vue.com Ponent takes the component’s constructor, constructs the instance, and uses the instance’s methods to process the data and mount the node. But we found that Vue.com Ponent is only responsible for global registration or lookups.

If we want to use dynamic create and add for locally registered components we need to use the underlying Vue constructor vue.extend to create a “subclass” for this purpose. In fact, Vue automatically calls vue.extend when the Vue.component method passes in an object.

Examples of complete code:

const ButtonCounterComponent = {
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'.data() {
    return {
      count: 0}}};new Vue({
  template: ` 
      
 
       
App Component
 
        
       
 
      
 `.methods: {
    insert() {
      const ButtonCounter = Vue.extend(ButtonCounterComponent);
      const instance = new ButtonCounter();
      instance.$mount("#insert-container");
    }
  }
}).$mount("#app");
Copy the code

Single file application

In a real-world scenario, most of the components are built into a project using scaffolding and registered in a single file using *.vue.

<template></template>
<script>
export default {
  data() {
    return {
      msg: "hello"
    }
  },
  created() {},
  mounted() {},
  destroy() {}
};
</script>
<style scoped></style>
Copy the code

Import *. Vue returns the export part of the template script.

conclusion

So far, we know how to use global component dynamic registration and local component dynamic registration and matters needing attention. We can choose different schemes to match according to the actual situation.