Vue - dynamically created registration component

Before understanding Vue dynamically create Component first look at conventional component declaration form.

Vue component generally may be declared in two ways, one is through Vue.component, another is Single File Components（SFC）a single file component.

Conventional component declaration and registration

// 定义一个名为 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: `
    <div id="app">
      <h1>App Component</h1>
      <button-counter></button-counter>
    </div>
  `
}).$mount("#app");
复制代码

In the above code, we declare a called button-countercomponent. If used under normal circumstances, it only need to write a corresponding page on the <button-counter></button-counter>label is enough. Global registration component can create dynamic creation, but we must templateuse this component declaration, and if all the components are registered globally this is not a good idea.

In the official document , we can see that we can register a component by Vue.component ( 'component-name') way. Examples of the components have $mountsuch a method, the official state $mountis explained as follows:

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.

Then we take it in this way to meet our needs?

not enough!

why? ? ?

Because the Vue.componentresult returned is a function ! Examples of its components is not returned, but a constructor.

In fact, here it was clear to us. For the Vue.componentcomponent declaration, we first by Vue.componentacquiring its constructor, then newa component instance, and finally through the $mountmount on html.

// 定义一个名为 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: `
    <div id="app">
      <h1>App Component</h1>
      <button @click="insert">click to insert button-counter comonent</button>
      <div id="insert-container"></div>
    </div>
  `,
  methods: {
    insert() {
      const ButtonCounter = Vue.component("button-counter"); // 只能查找到全局注册到组件
      const instance = new ButtonCounter();
      instance.$mount("#insert-container");
    }
  }
}).$mount("#app");
复制代码

The above code, the Vue.componentfirst get to the constructor assembly and configuration example, and to process the data node by some means mounted instance. But we found Vue.componentonly responsible for global registration or search.

If you want to use for the component parts Sign dynamically create and add that we need Vue.extendto create a "subclass" the purpose of the foundation Vue constructor. In fact, Vue.componentthe method passed option is a object, Vue automatically invoked Vue.extend.

Complete code sample:

const ButtonCounterComponent = {
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
  data() {
    return {
      count: 0
    }
  }
};

new Vue({
  template: `
    <div id="app">
      <h1>App Component</h1>
      <button @click="insert">click to insert button-counter comonent</button>
      <div id="insert-container"></div>
    </div>
  `,
  methods: {
    insert() {
      const ButtonCounter = Vue.extend(ButtonCounterComponent);
      const instance = new ButtonCounter();
      instance.$mount("#insert-container");
    }
  }
}).$mount("#app");
复制代码

Single-file applications

In actual use scene, most of them are built into the project with scaffolding, use * .vue this single file Register components.

<template></template>
<script>
export default {
  data() {
    return {
      msg: "hello"
    }
  },
  created() {},
  mounted() {},
  destroy() {}
};
</script>
<style scoped></style>
复制代码

import * .vue template is returned scriptin the export section.

to sum up

So far, we know that the use of methods and precautions global components dynamic registration and dynamic registration of the local assembly, we can go to the actual situation can choose different options to match.

Reproduced in: https: //juejin.im/post/5d027633e51d455070226f7b