Vue自定义事件

1. 事件的命名规范

组件上事件的命名推荐使用分隔符写法（** kebab-case **），如下面的add-size，因为html是大小写不敏感的，v-on后面跟的事件名都会转成小写的。用大写的会导致监听不到事件。

2. 自定义组件的v-model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

如下复选框：利用model定义了v-model把checked用作prop，把change作为event

3. 将原生事件绑到组件

重点：.native修饰符的使用 和 $listeners的使用

• 用 .native修饰符

如下代码的第10行，如果用 v-on:focus.native="focus"，那么第20行的label包裹标签要去掉才有用，因为.native表示该事件直接作用于该组件的根元素上，根元素是input时，focus事件才发挥作用

• $listeners

为了避免上述根元素变掉，导致加载组件上原生事件不起作用的问题，vue引入了$listeners，如下，第10行的.native不需要了，在组件模板中input上加上 v-on="$listeners" ，表示加在组件上的原生事件都应用在模板中input元素上。

问题解决，完美！ 完整demo如下：

完整demo：链接

更多Vue文档解读：《Vue Doc 笔记》

（完）