在上篇中，老K為大家介紹了一個初級自定義按鈕組件的編寫方法。雖然能用，但是還不算完美，可擴展性不夠強大。在這一篇中，老K繼續為大家完善這個按鈕組件。

啟動命令窗口， 進入在上篇中我們搭建的vue目錄中，輸入命令npm run dev啟動測試環境，如下圖：

查看測試頁面，打開谷歌瀏覽器中的vue調試工具，查看生成的組件是否正確，如下圖：

如果出現這個，則證明我們上次編寫的組件運行正確。現在，我們可以根據Element-ui的按鈕組件樣式先把通用的按鈕組件樣式編寫好。如下圖：

刷新測試頁面，查看效果，如下圖：

但是，Element-ui的按鈕組件有7種主題樣式，由type屬性來定義，默認是default。上述我們編寫的就是default主題。但是，其他主題樣式我們能否也能按照Element-ui的方式來定義呢？答案是肯定的。現在，我們就在上篇的代碼基礎上來實現這種方式。

為了方便理解，我們可以將上篇編寫的作為基礎組件。其他主題的按鈕組件都在此基礎上進行擴展。進入custom-global-component/src/components目錄，新建extendbutton目錄，如下圖：

進入extendbutton目錄下，新建入口文件index.js、組件文件ExtendButton.vue，如下圖：

打開ExtendButton.vue文件，嘗試編寫一個主題為primary的基礎擴展按鈕組件，如下圖：

擴展組件標簽名為“”，具有的主題樣式class名為“primay”。

進入入口文件index.js，引入extendbut組件模板，生成名為“et-button”的vue組件并輸出。如下圖：

這樣一個基礎的擴展按鈕組件就完成了。

現在，我們回到src目錄下，嘗試一下我們新編寫的基礎擴展按鈕組件。打開main.js和App.vue文件，引入并使用這個組件，如下圖：

main.js

App.vue

預覽效果：

這樣，一個primary主題的基礎擴展按鈕組件就完成了。當然，這樣還沒有完成。因為，我們并沒有通過設置組件的type屬性控制按鈕的主題。為了實現這種功能，我們可以做一個工廠方法一樣的組件復用。此時我們就會用到prop來傳遞屬性。

打開ExtendButton.vue，進一步修改此文件。如下圖：

在ExtendButton.vue中，添加各種主題樣式，如下圖：

此時我們就可以在App.vue中這樣使用組件了，如下圖：

預覽效果如下圖：

這樣跟Element-ui的按鈕組件用法基本一樣了。當然，使用按鈕組件免不了給其綁定事件。直接給自定義組件綁定事件顯然是不行的。需要提前給組件添加on對象和出發其自定義的事件。分別進入Button.vue和ExtendButton.vue，進一步修改代碼，如下圖：

Button.vue

ExtendButton.vue

打開App.vue，定義一個測試函數test，給default主題按鈕綁定test，如下圖：

點擊default主題按鈕，測試效果，如下圖：

此時在組件中就可以綁定事件了。一個完美的Element-ui風格的自定義按鈕組件就完成了。上述代碼我已提交到github，歡迎參考！

代碼地址：

這個自定義vue2.0全局組件的方法就介紹到這里，若有不足之處，歡迎指正！

本文為原創內容，若轉載請注明出處，轉發感激不盡。

總結

以上是生活随笔為你收集整理的vue 添加全局组件_自定义vue2.0全局组件（下篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。