自定义事件

事件名

不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件

名需要完全匹配监听这个事件所用的名称。如果触发一个驼峰式(camelCase)的名字的事件：

this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

<!-- 没有效果 -->

<my-component v-on:my-event="doSomething"></my-component>

所以事件名始终使用 kebab-case的事件名。

自定义组件的v-model

一个组件上的v-model 默认会用名为value的prop和名为input的事件，

但是单选框，复选框的输入空间可能将value 特性用于不同的目的。

model 选项避免这样的冲突：

model: { prop: 'checked', event: 'change' },

props: { checked: Boolean },

template: ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > `

使用：

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

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。

同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候

这个 lovingVue 的属性将会被更新。

 

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。