Vue 自訂動態組件實例詳解

vue的ui元件庫很多種，但是這麼多的元件庫也不能滿足我們的開發需求，所以需要我們根據自己需求自己寫一個插件，下文我透過兩個栗子給大家介紹js自訂元件的方法，有興趣的朋友一起看看吧

現在基於vue的UI元件庫有很多，例如iview，element-ui等。但有時候這些元件庫滿足不了我們的開發需求，這時候我們就需要自己寫一個外掛。

舉第一個栗子

用vue-cli搭建好專案目錄之後，在src/components下面新建一個資料夾放我們要寫的插件，如圖所示:

index.vue裡寫我們的元件，程式碼如下：

index.js裡面寫index.vue的install方法，並用Vue.component註冊元件，程式碼如下：

接下來我們要在預設的main.js裡將剛剛寫好的index.js檔案匯入，透過Vue.use來使用它，程式碼如下：

#大功告成，接下來在app.vue裡直接使用就可以啦，可以看到頁面已經顯示對應的元件了，如圖：

這時候我們還可以自訂click事件，並透過參數的方式傳遞給我們的插件，插件可以透過props屬性取得到該事件，如圖：

可以看到頁面已經生效了：

Vue.component(id, [definition])用於註冊或取得元件。

Vue.use(plugin)用於安裝 Vue.js 外掛程式。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數，它會被當作 install 方法。 install 方法呼叫時，會將 Vue 傳入為參數。當 install 方法被同一個插件多次調用，插件將只會被安裝一次。

舉第二個栗子

我們再建一個資料夾，如圖：

我們要寫一個元件，能夠顯示外部傳進來的內容，並在3秒後自動消失，程式碼如下：

接下來我們要在index. js裡使用建構器來建立它，如圖：

依舊在預設的main.js裡引用剛剛的js文件，並加入到Vue實例上，這樣我們就可以直接透過this.$seconddemo()來呼叫了，程式碼如下：

import SecondDemo from './components/global/seconddemo/index'Vue.prototype.$seconddemo = SecondDemo

在app.vue裡使用它，發現外掛程式載入成功了，如圖：

Vue.extend(options)是Vue 的建構器，用來建立一個「子類別」。

統一管理自訂元件

當元件數量很多時，我們可以透過提供一個統一的出口檔案來管理這些自訂元件，首先在global資料夾下新建一個index.js文件，程式碼如圖：

#index.js檔案幫我們把所有自訂的元件都通過Vue.component註冊了，最後export一個包含install方法的物件給Vue.use()使用。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

ajax實作點擊不同的連結讓回傳的內容顯示在特定div裡

Jquery $ .ajax函數外的一段程式碼的執行順序

自己動手打造ajax圖片上傳

以上是Vue 自訂動態組件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！