Vue中怎么動態創建注冊component

這期內容當中小編將會給大家帶來有關Vue中怎么動態創建注冊component，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

常規組件聲明與注冊

// 定義一個名為 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">
   <h2>App Component</h2>
   <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">
   <h2>App Component</h2>
   <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">
   <h2>App Component</h2>
   <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 部分。

上述就是小編為大家分享的Vue中怎么動態創建注冊component了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。