vue 之自定义事件

事件名

推荐始终使用kebab-case的事件名，eg: my-event

自定义组件的v-model

demo解读：

1. 首先，定义你自己的model，使用标签 model的prop定义绑定的内容checked，此处需要对应props接收的checked
2. event定义我们对应的事件名change，方便下文调用；
3. 最后只需要在使用组件时用v-model绑定对应的属性即可让父组件的data子属性对应子组件的子属性了。

将原生事件绑定到组件

1. 假如组件元素就是根元素，例如组件的根元素就是input ，那么可以直接用.native—— v-on:focus.native=“onFocus”；
2. 但根元素不是input类型时需要采用 $listeners属性；看demo。
   
   父组件调用：
   此处用法的关键就是自定义的 inputListeners的计算属性，需要用 v-on绑定，同时需要注意此用法的input属性的补充。

.sync修饰符

背景

真正的双向绑定会带来维护上的问题，所以vue不存在真正意义上的双向绑定。

解决方案

官方推荐使用——update:myPropName——模式触发事件实现**“双向绑定”**
demo：
子组件修改父组件元素：
this.$emit(‘update:title’, newTitle)
父组件调用配置：

官方简写：

多个prop写法：

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)

最后附上官网：vue自定义事件