422
自定義vue2.0全局組件（下篇）
在上篇中，老K為大家介紹了一個初級自定義按鈕組件的編寫方法。雖然能用，但是還不算完美，可擴展性不夠強大。在這一篇中，老K繼續為大家完善這個按鈕組件。
啟動命令窗口， 進入在上篇中我們搭建的vue目錄中，輸入命令npm run dev啟動測試環境，如下圖：
查看測試頁麵，打開穀歌瀏覽器中的vue調試工具，查看生成的組件是否正確，如下圖：
如果出現這個，則證明我們上次編寫的組件運行正確。現在，我們可以根據Element-ui的按鈕組件樣式先把通用的按鈕組件樣式編寫好。如下圖：
刷新測試頁麵，查看效果，如下圖：
但是，Element-ui的按鈕組件有7種主題樣式，由type屬性來定義，默認是default。上述我們編寫的就是default主題。但是，其他主題樣式我們能否也能按照Element-ui的方式來定義呢？答案是肯定的。現在，我們就在上篇的代碼基礎上來實現這種方式。
為了方便理解，我們可以將上篇編寫的<g-button>作為基礎組件。其他主題的按鈕組件都在此基礎上進行擴展。進入custom-global-component/src/components目錄，新建extendbutton目錄，如下圖：
進入extendbutton目錄下，新建入口文件index.js、組件文件ExtendButton.vue，如下圖：
打開ExtendButton.vue文件，嚐試編寫一個主題為primary的基礎擴展按鈕組件，如下圖：
擴展組件標簽名為“<et-button>”，具有的主題樣式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，歡迎參考！
歡迎關注個人公眾號，查看更多好文。
最後更新：2017-06-15 13:31:45