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 部分。

總結

至此，咱們知道了，全局組件動態註冊 和 局部組件動態註冊 的使用方法和注意事項，咱們能夠結合實際狀況去選擇不一樣方案進行搭配便可。