Vue中怎么自定義動態(tài)組件，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
舉第一個栗子
用vue-cli搭建好項目目錄之后，在src/components下面新建一個文件夾放我們要寫的插件，如圖所示:
index.vue里寫我們的組件，代碼如下：
index.js里面寫index.vue的install方法，并用Vue.component注冊組件，代碼如下：
接下來我們要在默認的main.js里將剛剛寫的index.js文件導(dǎo)入，并通過Vue.use來使用它，代碼如下：
大功告成，接下來在app.vue里直接使用就可以啦，可以看到頁面已經(jīng)顯示相應(yīng)的組件了，如圖：
這時候我們還可以自定義click事件，并通過參數(shù)的方式傳遞給我們的插件，插件可以通過props屬性獲取到該事件，如圖：
可以看到頁面已經(jīng)生效了：
Vue.component(id, [definition])用于注冊或獲取組件。
Vue.use(plugin)用于安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數(shù)，它會被作為 install 方法。install 方法調(diào)用時，會將 Vue 作為參數(shù)傳入。當(dāng) install 方法被同一個插件多次調(diào)用，插件將只會被安裝一次。
舉第二個栗子
我們再建一個文件夾，如圖：
我們要寫一個組件，能夠顯示外部傳進來的內(nèi)容，并在3秒后自動消失，代碼如下：
接下來我們要在index.js里使用構(gòu)造器來創(chuàng)建它，如圖：
依舊在默認的main.js里引用剛剛的js文件，并加入到Vue實例上，這樣我們就可以直接通過this.$seconddemo()來調(diào)用了，代碼如下：
import SecondDemo from './components/global/seconddemo/index'Vue.prototype.$seconddemo = SecondDemo
在app.vue里使用它，發(fā)現(xiàn)插件加載成功了，如圖：
Vue.extend(options)是 Vue 的構(gòu)造器，用于創(chuàng)建一個“子類”。
統(tǒng)一管理自定義組件
當(dāng)組件數(shù)量很多時，我們可以通過提供一個統(tǒng)一的出口文件來管理這些自定義組件，首先在global文件夾下新建一個index.js文件，代碼如圖：
index.js文件幫我們把所有自定義的組件都通過Vue.component注冊了，最后export一個包含install方法的對象給Vue.use()使用。
看完上述內(nèi)容，你們掌握Vue中怎么自定義動態(tài)組件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
