vue 之自定义事件

事件名

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

自定义组件的v-model

<base-checkbox v-model="lovingVue"></base-checkbox>

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。
   
   父组件调用：<base-input v-model="username" required="true" placeholder="Enter your username" label="test label" v-on:focus="onFocus" v-on:mouseover="onFocus"></base-input>
   此处用法的关键就是自定义的 inputListeners的计算属性，需要用 v-on绑定，同时需要注意此用法的input属性的补充。

.sync修饰符

背景

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

解决方案

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

官方简写：
<text-document v-bind:title.sync="doc.title"></text-document>
多个prop写法：
<text-document v-bind.sync="doc"></text-document>

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

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