資訊專欄INFORMATION COLUMN
摘要：對(duì)于聲明的組件，我們先通過獲取它的構(gòu)造函數(shù)，再出一個(gè)組件實(shí)例，最后通過掛載到上。通過傳入一個(gè)包含的對(duì)象，幫助我們創(chuàng)建一個(gè)繼承了的子類，也就是我們之前需要的構(gòu)造函數(shù)。好了，得到了構(gòu)造函數(shù)，接下來的工作就簡(jiǎn)單了。
Vue 動(dòng)態(tài)創(chuàng)建 component
在 angular 中 可以通過 ComponentFactoryResolver 來動(dòng)態(tài)創(chuàng)建 component , 在平時(shí)使用 vue 的過程中也沒有了解到這方面的信息。于是就花時(shí)間研究了一下。
Vue 的組件可以通過兩種方式來聲明，一種是通過 Vue.component，另外一種則是 Single File Components（SFC） 。
以下除非特別說明，組件都是全局注冊(cè)的
Vue.component 方式首先來看 Vue.component 方式的。
Vue.component("button-counter",{
data: function () {
return {
count: 0
}
},
template: ""
});
在上面的代碼中我們聲明了一個(gè)叫做 button-counter 的組件。如果在常規(guī)情況下使用的話，只需要在頁面上寫對(duì)應(yīng)的
那么通過編程方式怎么處理呢？
在官方文檔中我們可以看到，我們可以通過 Vue.component("component-name") 的方式來獲取到 組件。而組件實(shí)例又有 $mount 這樣一個(gè)方法，官方對(duì)于 $mount 的解釋如下：
$mount 方法有兩個(gè)參數(shù)
{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.
那我們是否可以通過這種方式來達(dá)到我們的需求呢？
還不夠！
為什么？
因?yàn)?Vue.component 返回的結(jié)果是一個(gè) function！它返回的并不是 組件實(shí)例，而是一個(gè)構(gòu)造函數(shù)。
那到這里其實(shí)我們就清楚了。 對(duì)于 Vue.component 聲明的組件，我們先通過 Vue.component 獲取它的構(gòu)造函數(shù)，再 new 出一個(gè)組件實(shí)例，最后 通過$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在實(shí)際工作中，大部分都是用官方的腳手架 vue-cli 生成項(xiàng)目，用的也是 SFC 這種方式。
我們的 button-counter 如果用 SFC 方式實(shí)現(xiàn)的話應(yīng)該是這樣子的：
那么是否可以通過 export 出的對(duì)象來實(shí)現(xiàn)我們的需求呢？
首先我們來看，在 SFC 中， 我們?cè)?script 中 export 了一個(gè)對(duì)象出去，那么通過這個(gè)對(duì)象應(yīng)該是可以達(dá)到要求的。
先來看看 import 之后這個(gè)對(duì)象是什么樣子的。
可以發(fā)現(xiàn) import 得到的對(duì)象要比我們?cè)? 組件中聲明的多了一些屬性和方法。
在 Vue.component 模式中，我們先獲取到組件的構(gòu)造函數(shù)，然后構(gòu)造實(shí)例，通過實(shí)例的一些方法來處理數(shù)據(jù)和掛載節(jié)點(diǎn)。
很顯然，現(xiàn)有數(shù)據(jù)不能滿足我們。如果我們能將這個(gè)對(duì)象轉(zhuǎn)化成一個(gè)組件的構(gòu)造函數(shù)，那我們就可以利用上面的方案來實(shí)現(xiàn)我們的需求了。
那么，究竟需要怎么轉(zhuǎn)換呢？
沒錯(cuò)！ 就是 Vue.extend 這個(gè)大兄 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().
通過傳入一個(gè)包含 Component options 的對(duì)象， Vue.extend 幫助我們創(chuàng)建一個(gè) 繼承了 Vue constructor 的子類，也就是我們之前需要的構(gòu)造函數(shù)。
好了，得到了構(gòu)造函數(shù)，接下來的工作就簡(jiǎn)單了 。實(shí)例化，然后掛載。
下面就是完整的代碼：
在線查看 https://codesandbox.io/s/m59r3547zy
https://codesandbox.io/s/m59r...
結(jié)束Happy Ending。
到這里，通過編程的方式動(dòng)態(tài)創(chuàng)建組件掛載到HTML 的兩種方式就完成了。
再次感到看文檔的重要性。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96263.html
摘要：在組件內(nèi)，我們觸及不到組件的模板，所以簡(jiǎn)單的在動(dòng)態(tài)模板上添加并不能完成事件監(jiān)聽。簡(jiǎn)單來說，依賴收集是在渲染函數(shù)渲染的函數(shù)中進(jìn)行的，在中一旦通過使用了這個(gè)變量，通過這個(gè)變量的就收集到了正在執(zhí)行的渲染函數(shù)這一個(gè)依賴。 作為一個(gè)中后臺(tái)表單&表格工程師，經(jīng)常需要在一個(gè)頁面中處理多個(gè)彈窗。我自己的項(xiàng)目中，一個(gè)復(fù)雜的審核頁面中的彈窗數(shù)量超過了30個(gè)，如何管理大量的彈窗就成為了一個(gè)需要考慮的問題。 ...
摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過來訪問指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...
摘要：直接創(chuàng)建組件使用標(biāo)簽名組件模板，根據(jù)組件構(gòu)造器來創(chuàng)建組件。相應(yīng)的，實(shí)例也被稱為父組件。而且不允許子組件直接修改父組件中的數(shù)據(jù)，強(qiáng)制修改會(huì)報(bào)錯(cuò)。 一、組件 （一）什么是組件 組件（Component）是 Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML元素，封裝可重用的代碼組件是自定義元素（對(duì)象）。 （二）創(chuàng)建組件的兩種方式 官方推薦組件標(biāo)簽名是使用-連接的組合詞，例如：。 1、使用...
摘要：直接創(chuàng)建組件使用標(biāo)簽名組件模板，根據(jù)組件構(gòu)造器來創(chuàng)建組件。相應(yīng)的，實(shí)例也被稱為父組件。而且不允許子組件直接修改父組件中的數(shù)據(jù)，強(qiáng)制修改會(huì)報(bào)錯(cuò)。 一、組件 （一）什么是組件 組件（Component）是 Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML元素，封裝可重用的代碼組件是自定義元素（對(duì)象）。 （二）創(chuàng)建組件的兩種方式 官方推薦組件標(biāo)簽名是使用-連接的組合詞，例如：。 1、使用...
摘要：除了監(jiān)聽事件外，還可以用于組件之間的自定義事件。它僅僅作為一個(gè)直接訪問子組件的應(yīng)急方案，應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用。將和合并成，會(huì)自動(dòng)去判斷是普通標(biāo)簽還是組件。子組件這里的狀態(tài)綁定的是父組件的數(shù)據(jù)。 查看原文站點(diǎn)，更多擴(kuò)展內(nèi)容及更佳閱讀體驗(yàn)！ 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-com...
閱讀 702·2023-04-25 19:53
閱讀 4304·2021-09-22 15:13
閱讀 2580·2019-08-30 10:56
閱讀 1337·2019-08-29 16:27
閱讀 2947·2019-08-29 14:00
閱讀 2426·2019-08-26 13:56
閱讀 452·2019-08-26 13:29
閱讀 1627·2019-08-26 11:31
