这里以最简单的el-input组件入手，扒一扒element官方是如何来写组件的。
来看看el-input的用法（来自官网文档截图）：
由官网文档可知：只要我们在安装了element-ui的情况下，按如图所示，便可直接使用。
那么，首先来思考两个最基本的问题：
- el-input这个组件上并没有添加class，它是如何拥有了样式
- el-input上的v-model，绑的应该不是el-input，因为v-model是双向绑定，只能绑有交互的元素比如input，那这里，它是如何给绑到它里边真正的input元素上去的
直接去gitee上搜到element-ui的源码（不翻墙的话，github太慢）：
packages目录下找到input，继续往里找到input.vue文件，这就是源码了。
看源码的时候，带着问题看，只看我们所关注的，其他的一大堆源码，先不予理会，不然容易弄晕自己。
我们第一个问题：“el-input组件，是如何拥有样式的？”
看源码开头：
上文中截图的官网文档，el-input没有传type，所以在这里的三元表达式中，type为undefined，div的class值最终为“el-input”。
打开浏览器，可以验证：
有了class就好办，在element的css文件里就可以写样式了：
同理，组件里的input输入框的class也是这么加上去的，就不再做解析了。
现在来看第二个问题：“绑在el-input上的v-model是如何给绑到组件里边真正的input输入框上的？”
继续看源码，从这里可以看到，input输入框监听了input事件，当输入框里的值被改变时，会触发handleInput函数：
继续往下面扒handleInput这个函数：
如图，真相来了，handleInput这个函数，通过input方法把输入框里的值传给了父组件。
总结就是：监听输入框的值，如果值有变化，就通过$emit用input方法把当前值传给父组件，然父组件就可以直接v-model获取到这个值了。
什么？父组件不是input，直接v-model也能获取到这个值？
v-model不就是监听input事件的么，这里的父组件是个div，本没有input事件，子组件给$emit了个input，就有input事件了。
如果还不理解，看尤大大给的解释：
我已将el-input这部分代码抽离，完全照葫芦画瓢，成功实现，也验证了这个解析是对的，下一篇放验证的过程和结果。
