在上篇中，老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，欢迎参考！
<a href="http://mp.weixin.qq.com/s?__biz=mjm5oda2mdiyma==&mid=2247483742&idx=1&sn=ecea6017709404db1b7be116b80f32ca&chksm=a6d1c88d91a6419bd74170dd2878c18baa5b0d2f3402062d8809b195bde5d01352ff36dfe15d&mpshare=1&scene=23&srcid=0615btsxo3lrfyhkvinlwpyj#rd" target="_blank">点击查看公众号文章</a>
欢迎关注个人公众号，查看更多好文。