ElementUI是一款非常流行的vue插件库，整合了开发中大多数的组件。
最近正好在学习vue，就尝试简单模拟一下el-button的实现。
最近正好在学习vue，就尝试简单模拟一下el-button的实现。
1.引入vue核心js
<script src="vue.js"></script>
2.用Vue.component语法设置全局插件
Vue.component('elButton', { name: 'elButton', props: { type: { type: String, default: "default" } }, data() { return {} }, template: ` < button :class="'el-button el-button--' + type" @click="triggerClick"> <slot></slot> < /button> `, mounted() { }, methods: { triggerClick(){ this.$emit('click', "模拟参数"); } }, });
3.调用过程
<el-button type="primary" @click="add">新增</el-button> <el-button type="warning">修改</el-button> <el-button type="danger">删除</el-button>
4.如何控制按钮颜色的？
核心就在于这一段代码：
<button :class="'el-button el-button--' + type" @click="triggerClick">
type是外部组件传进来的参数，这边就直接字符串拼接了。然后会对应到具体的class
/*el-button组件样式*/ .el-button { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; border-color: #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 12px 20px; font-size: 14px; border-radius: 4px; } .el-button--default { } .el-button--primary { color: #fff; background-color: #409eff; border-color: #409eff; } .el-button--success { color: #fff; background-color: #67c23a; border-color: #67c23a; } .el-button--warning { color: #fff; background-color: #e6a23c; border-color: #e6a23c; } .el-button--danger { color: #fff; background-color: #f56c6c; border-color: #f56c6c; }
如果不传type，就是default。
5.如何实现点击事件？
外部组件直接放心地添加@click事件，然后el-button组件内部用$emit去触发即可。
6.$emit的原理是啥？
这是vue内部去做的，不过也可以手动替换Vue原型链的$emit方法：
Vue.prototype.$emit = function (event) { let _events = this._events; let cbs = _events[event]; if (cbs) { cbs[0].apply(app, [arguments].splice(1)); } }
这是一个简单的实现，实际实现会更加复杂。
this就指向当前的Vue实例，也是页面中唯一的那个vue实例，_events是所有设置的方法和事件，比如你写在methods里面的add方法。
思路还是很直白的，就是遍历所有事件，看看当前触发的是哪一个事件，找到了就直接用apply去调用。为啥用apply而不用call？源码就这么写的，用call其实也一样，只不过后面的参数不能用数组了，要用变长参数。好像是这样的，具体不记得了。
得到的event竟然是一个数组，搞不懂为啥vue要这么设计。
