Vue - 动态建立注册component

在深刻了解Vue动态建立Component前先了解一下常规组件声明形式。

Vue 的组件一般能够经过两种方式来声明， 一种是经过 Vue.component，另一种则是 Single File Components（SFC） 单文件组件 。

常规组件声明与注册

// 定义一个名为 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");
复制代码

在上面的代码中咱们声明了一个叫作 button-counter 的组件。 若是在常规状况下使用的话，只须要在页面上写对应的 <button-counter></button-counter> 标签就够了。 全局建立注册组件能够实现动态建立，可是咱们必须在 template 声明使用该组件，并且若是把全部组件都全局注册这并非一个好办法。

在官方文档中咱们能够看到， 咱们能够经过 Vue.component('component-name') 的方式来注册一个组件。 而组件实例又有 $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.

那咱们是否能够经过这种方式来达到咱们的需求呢？

还不够！

为何？？？

由于 Vue.component 返回的结果是一个 function！它返回的并非 组件实例，而是一个构造函数。

那到这里其实咱们就清楚了。 对于 Vue.component 声明的组件，咱们先经过 Vue.component 获取它的构造函数，再 new 出一个组件实例，最后 经过 $mount 挂载到 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");
复制代码

上述代码中，Vue.component 先获取到组件的构造函数，而后构造实例，经过实例的一些方法来处理数据和挂载节点。 可是咱们发现 Vue.component 只负责全局注册或查找。

若是想要针对局部注册的组件使用动态建立并添加咱们须要使用 Vue.extend 基础Vue构造器建立"子类"达到目的。 其实 Vue.component 方法传入的选项是一个对象时，Vue自动调用 Vue.extend。

完整代码示例：

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");
复制代码

单文件应用

在实际使用场景里，大部分都是用脚手架构建到项目，使用 *.vue 这种单文件方式注册组件。

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

import *.vue 返回的就是模版中 script 中 export 部分。

总结

至此，咱们知道了，全局组件动态注册 和 局部组件动态注册 的使用方法和注意事项，咱们能够结合实际状况去选择不一样方案进行搭配便可。