以給它添加methods屬性，然後把它對應的單擊事件寫進去就行了。
代碼如下。
注意，這個methods是coolbtn裡麵的methods，不是外麵vue對象的methods，不要混淆。然後，再給組件模板添加單擊事件。
測試一下，單擊“登錄”按鈕，應該能看到一個默認的彈窗。但是這樣不行啊，因為在更多的時候組件是被封裝好的，根本不涉及業務邏輯。比如，在這個例子裡麵，我們希望調用coolbtn組件製作一個登錄按鈕，但是登錄的邏輯是外麵vue組件需要做的事情，不能寫在按鈕組件裡麵。也就是說，我們希望在子組件的defaultclick方法裡麵調用外麵的某個方法。調用外麵的什麼方法呢？比如在登錄的時候隨便寫了一個方法叫作login，代碼如下。
問題來了，子組件怎麼知道將來需要調用一個叫作login的方法呢？而且這個方法還是來自於父組件的。這就需要遵循一個原則——約定大於配置。該怎麼理解呢？很簡單，就是封裝好coolbtn組件，因為是按鈕，所以肯定要被單擊，單擊就要調用單擊事件。那麼不妨就規定好，當coolbtn組件觸發默認的defaultclick方法時，就觸發調用者的某個方法，代碼如下。
this.$emit（'btn-click'）這句代碼的含義是觸發該組件綁定的btn-click事件所對應的來自於父組件的方法。這句話有點繞，再加一點代碼吧，這樣一來，coolbtn的調用就要這麼寫了：
可以看到，在調用coolbtn的時候新添加了一個btn-click事件，因為對於父頁麵來說，cool-btn就是一個組件而已，當然可以給一個組件綁定事件。隻不過這個事件叫作btn-click，不是我們熟悉的click、blur、focus等。btn-click是子組件約定的，隻要觸發btn-click事件，子組件就會相應地觸發內部的defaultclick。也就是說，btn-click就是一個中轉站，我們最終的目的是單擊coolbtn內部的input按鈕。但input按鈕在coolbtn的內部被封裝起來了，我們沒辦法直接控製它。可一個優秀的組件必須給外部提供完整的訪問權限。因此，我們就讓coolbtn組件的調用者擁有間接地單擊內部按鈕的能力。
現在，我們再來單擊一下按鈕，可以看到成功調用了login方法。到目前為止，這個按鈕組件就初步完成了，隻要它可以設置按鈕文字，可以單擊，它就能夠投入使用了。但是，一個好的組件還必須擁有良好的擴展性和選擇性。
比如，我們還可以設置按鈕的顏色，傳遞一個color屬性進去即可。但是調用者還是更喜歡直接得到幾個選項自已選擇。因此，我們不妨設置幾個默認的顏色，供用戶選擇。
1. danger(紅色)
2. success(綠色)
3. primary(藍色)
4. warning(黃色)
可以添加一個type屬性，分別對應4種不同的按鈕，先把4種顏色都準備好。
4種顏色分別對應4種按鈕，style標簽放在head標簽裡麵即可。通過給組件添加class的方式切換不同的按鈕風格。目前準備了4種不同的按鈕，分別為danger、success、primary、warning。然後給組件增加一個type屬性，代碼如下。
props: ['name', 'type'],լ
看本書最新章節，請到ｏｏｐ．ｔｗ
同樣，在template裡麵也要增加這個class選項。
這樣一來，組件的調用者隻需要傳入一個type屬性，即可同步更新template裡麵的class的值。到目前為止，coolbtn的完整代碼如下。
這樣一來，在調用按鈕組件的時候，隻需要傳入不同的type就可以顯示出不同風格的按鈕了。比如，現在製作一個success風格的登錄按鈕，代碼如下。
>ntb-looc 。下如法方義定體具，用使麵頁意任在以可件組局全。件組局全為級升件組鈕按個這將以可們我，以所。的煩麻常非是這，碼代源的應對件組改修中麵頁的件組該用使個一每到要需就，展擴者或改修了行進件組對一萬，新更和護維的件組於利不常非樣這，顯明很。遍一寫新重碼代源的件組把能隻，件組個這用使想要麵頁他其。用使能才麵頁個這在有隻以所，的義定麵裡象對euv的麵頁前當在是為因件組個這說是就，件組部局個一是件組個這，句一提後最，示所62-4圖如果結 果結行運 62-4圖 。去進製複碼代些這把後然，sj.ntblooc個一建新妨不們我，件組個一了加添上象對大euv的總在於當相就這 。可即sj個這入引就麵頁個這，件組個這到用要需麵頁個哪。示所72-4圖如果結 果結 72-4圖 >tpircs/< > "sj.ntblooc/sj" =crs "tpircsavaj/txet" =epyt tpircs< 。sj.ntblooc入引再，件文心核的euv入引先須必以所，件文庫的euv賴依要需件組局全個這為因，意注 性屬算計——式七第euv 01.4 需候時些某在指是性屬算計的euv
