Vue 動態創建 component

jimhs 發布于2019-08-22 18:50 / 3485人閱讀

摘要：對于聲明的組件，我們先通過獲取它的構造函數，再出一個組件實例，最后通過掛載到上。通過傳入一個包含的對象，幫助我們創建一個繼承了的子類，也就是我們之前需要的構造函數。好了，得到了構造函數，接下來的工作就簡單了。

Vue 動態創建 component

在 angular 中可以通過 ComponentFactoryResolver 來動態創建 component , 在平時使用 vue 的過程中也沒有了解到這方面的信息。于是就花時間研究了一下。

Vue 的組件可以通過兩種方式來聲明，一種是通過 Vue.component，另外一種則是 Single File Components（SFC） 。

以下除非特別說明，組件都是全局注冊的

Vue.component 方式

首先來看 Vue.component 方式的。

Vue.component("button-counter",{
   data: function () {
    return {
      count: 0
    }
  },
  template: ""
});

在上面的代碼中我們聲明了一個叫做 button-counter 的組件。如果在常規情況下使用的話，只需要在頁面上寫對應的標簽就夠了。

那么通過編程方式怎么處理呢？

在官方文檔中我們可以看到，我們可以通過 Vue.component("component-name") 的方式來獲取到組件。而組件實例又有 $mount 這樣一個方法，官方對于 $mount 的解釋如下：

$mount 方法有兩個參數

{Element | string} [elementOrSelector]

{boolean} [hydrating]

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 上。

下面是完整的代碼:

Vue.component("button-counter", {
  data: function() {
    return {
      count: 0
    };
  },
  template:
    ""
});

Vue.component("app", {
  data: function() {
    return {
      count: 0
    };
  },
  template:
    " App Component
  ",
  methods: {
    insert() {
      const component = Vue.component("button-counter");
      const instance = new component();
      instance.$mount("#appId");
    }
  }
});

new Vue({
  el: "#app"
});

https://codepen.io/YoRolling/...

SFC

在實際工作中，大部分都是用官方的腳手架 vue-cli 生成項目，用的也是 SFC 這種方式。

我們的 button-counter 如果用 SFC 方式實現的話應該是這樣子的：

那么是否可以通過 export 出的對象來實現我們的需求呢？

首先我們來看，在 SFC 中，我們在 script 中 export 了一個對象出去，那么通過這個對象應該是可以達到要求的。

先來看看 import 之后這個對象是什么樣子的。

可以發現 import 得到的對象要比我們在組件中聲明的多了一些屬性和方法。

在 Vue.component 模式中，我們先獲取到組件的構造函數，然后構造實例，通過實例的一些方法來處理數據和掛載節點。

很顯然，現有數據不能滿足我們。如果我們能將這個對象轉化成一個組件的構造函數，那我們就可以利用上面的方案來實現我們的需求了。

那么，究竟需要怎么轉換呢？

沒錯！就是 Vue.extend 這個大兄 dei！我們看下官方的說明。

Create a “subclass” of the base Vue constructor. The argument should be an object containing component options.The special case to note here is the data option - it must be a function when used with Vue.extend().

通過傳入一個包含 Component options 的對象， Vue.extend 幫助我們創建一個繼承了 Vue constructor 的子類，也就是我們之前需要的構造函數。

好了，得到了構造函數，接下來的工作就簡單了。實例化，然后掛載。

下面就是完整的代碼：

在線查看 https://codesandbox.io/s/m59r3547zy

https://codesandbox.io/s/m59r...

結束

Happy Ending。

到這里，通過編程的方式動態創建組件掛載到HTML 的兩種方式就完成了。

再次感到看文檔的重要性。

GPU云服務器云服務器動態創建表格動態創建實例動態創建屬性動態創建checkbox

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96263.html

從Dialog管理談到Vue渲染原理

摘要：在組件內，我們觸及不到組件的模板，所以簡單的在動態模板上添加并不能完成事件監聽。簡單來說，依賴收集是在渲染函數渲染的函數中進行的，在中一旦通過使用了這個變量，通過這個變量的就收集到了正在執行的渲染函數這一個依賴。作為一個中后臺表單&表格工程師，經常需要在一個頁面中處理多個彈窗。我自己的項目中，一個復雜的審核頁面中的彈窗數量超過了30個，如何管理大量的彈窗就成為了一個需要考慮的問題。 ...

darkbug 2019-08-23 13:56 評論0 收藏0
Vue.js-組件詳解

摘要：事件總線事件總線首先創建了一個名為的空的實例然后全局定義了組件最后創建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內通過來訪問指定名稱的子組件。學習筆記：組件詳解組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...

jeffrey_up 2019-08-23 16:02 評論0 收藏0
vue學習筆記（三）

摘要：直接創建組件使用標簽名組件模板，根據組件構造器來創建組件。相應的，實例也被稱為父組件。而且不允許子組件直接修改父組件中的數據，強制修改會報錯。一、組件（一）什么是組件組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。（二）創建組件的兩種方式官方推薦組件標簽名是使用-連接的組合詞，例如：。 1、使用...

fsmStudy 2019-08-21 17:14 評論0 收藏0
vue學習筆記（三）

摘要：直接創建組件使用標簽名組件模板，根據組件構造器來創建組件。相應的，實例也被稱為父組件。而且不允許子組件直接修改父組件中的數據，強制修改會報錯。一、組件（一）什么是組件組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。（二）創建組件的兩種方式官方推薦組件標簽名是使用-連接的組合詞，例如：。 1、使用...

zsirfs 2019-08-01 17:51 評論0 收藏0
Vue-組件詳解

摘要：除了監聽事件外，還可以用于組件之間的自定義事件。它僅僅作為一個直接訪問子組件的應急方案，應當避免在模板或計算屬性中使用。將和合并成，會自動去判斷是普通標簽還是組件。子組件這里的狀態綁定的是父組件的數據。查看原文站點，更多擴展內容及更佳閱讀體驗！組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-com...

dadong 2019-08-26 12:00 評論0 收藏0