自定义事件

本节目标：理解“自定义事件”的核心思路，并能把它用于实际开发或面试表达。 事件名 推荐始终使用 kebab-case 的事件名。 不同于组件和 prop，触发的事件名不存在任何自动化的大小写转换。 而是触发的事件名需要完全匹配监听这个事件所用的名称。 监听事件所用的名称会被转化小写。

即，如果触发一个 camelCase 名字的事件：

this.$emit('myEvent')

； 则监听这个名字的 kebab-case 版本无效： \<!-- 没有效果

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

原因：

• 事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。
• 并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 kebab-case 的事件名。 Model**选项：**自定义组件的

v-model
2.2.0+

新增 一个组件上的 v-model 默认会：

• 利用名为 value 的 prop
• 名为 input 的事件
• 但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。

model 选项可以用来避免这样的冲突： Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: \<input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" \> }) 现在在这个组件上使用 v-model 的时候：

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

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 \<base-checkbox\> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。 **注意：**仍然需要在组件的 props 选项里声明 checked 这个 prop。