1 .class通常都是这个写法
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-disabled`]: this.disabled
}
];
2 .绑定默认事件
handleIconClick () {
this.$emit('on-click');
},
3 .$dispatch事件是干啥的
1 .兄弟之间的通信，现在统一共vuex代替
2 .
组件核心代码
<template>
<div>
<input type="text" v-on:input="$emit('input',$event.target.value)">
</div>
</template>
<script>
export default {
model:{
// prop:'value',
// event:'input'
},
props:{
// value:''
}
}
</script>
//最简单的版本竟然可以这样
//是自动继承了父元素的prop,所以才会自动继承。好像不是这个问题，因为$attrs没有值
//反正还是写全吧，不然万一某个地方出现bug就坏了
1 .官网github的代码好像和官网给出的demo不一样
2 .还是以官网的为准吧
1 .自己写代码是从0-1，但是测试确实从烂到好，把一堆全是bug的东西变成没有问题的东西
2 .
添加.sync修饰符
1 .对prop进行双向绑定
2 .
补充
1 .添加一个inputType的prop选项。因为输入框如果是汉字的话，可能要限制一下最大长度，或者是做一下过滤检查，如果是数字的话，现在要做的就是确定一下最大值和最小值
2 .当输入的不正确的时候，要弹出一个notice组件的提示
3 .就是这样的表单组件还是要加双向绑定的，就是可以从里面改变值，然后可以从外面传值进来改变里面的值
4 .因为一个数值可能关联到好几个表单组件，所以需要
里面传入的是数字
1 .最大值:超过最大值，给一个提示，返回最大值
2 .最小值:超过最小值，给一个提示，返回最小值
3 .间隔：比如精确到几位，如果是1位的话，要对数字做处理的
4 .测试和开发最大的区别是，开发是一颗树，根据项目的复杂度，你需要不同的扩展你的知识，但是测试就感觉内容在不停的撕扯你的大脑，很多的点，就和一张需要打开的渔网，每次开始测试的时候你都需要慢慢的把网张开，而且要越长越大，不然就会有bug漏掉，而且测试的点没有重要和不重要的区别，所有的东西都不能犯错
5 .
input compositionstart，compositionend事件
1 .但是有一个问题就是当输入汉字的时候，可能我们要输入 ‘实时’ 的时候，我们的input框中会出现 'shishi'直到我们的空格才会变成 '实时',这也就意味着我们依次响应了 's','sh','shi','shis','shish','shishi','实时'，前面的结果明显不是我们需要的 ，造成了我们很多次无用的提交，如果是接口请求，那更要命，多发了好多次请求
2 .compositionstart:触发于一段文字的输入之前，类似于keydowm,加入我们要输入一段中文，当我们按下第一个字母时触发
3 .compositionend:完成当前中文触发
4 .实际使用场景
1 .从compositionstart触发开始，此时中文输入开始但是没有完成，所以此时不需要做成响应
2 .在compositionend触发时，表示中文输入完成，这时我们可以做出响应事件的处理
3 .更多兼容问题看这里[https://segmentfault.com/a/1190000013094932](https://segmentfault.com/a/1190000013094932)
5 .v-model 使用的时候没有这个问题，其实vue源码里面已经做了这个函数的处理
