事件名称
不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
因此，我们推荐你始终使用 kebab-case 的事件名。
如果想要触发一个事件，如my-event
this.$emit('my-event')
自定义组件的v-model
一个组件上的v-model默认利用名为value的属性和input的事件，但是像单选框，复选框等可能将value用作其他目的，而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的值将会传入props，同时当该组件触发一个change事件的时候，这个lovingVue的属性将会被更新。
将原生事件绑定到子组件
<template2 @click="clickMethod"></template2>
如果单纯的写上这种监听事件，会发现没有任何作用，点击事件不会生效，想要生效则需要这么写：
<template2 @click.native="clickMethod">加了native就有效果</template2>
但即使如此，如果新的组件内容比较复杂，即使在标签上如上写上onfocus，也不一定能将事件绑定到对应的input上：
<template4 @focus="console.log(123)"></template4>
var template4 = {
template: `
<div>点击没有任何效果？
<input @click="this.$listeners.focus" >
</div>
`,
created() {
console.log(this.$listeners)
},
methods: {
inputListeners: function () {
console.log("???")
}
},
computed: {
}
}
如上，input在div中包裹着，这样focus事件是不会绑定到对应的input上，所以需要$listeners属性。
$listeners属性会保存标签上绑定来的所有事件
所以，可以通过该属性来正确调取需要的监听事件：
<input @click="this.$listeners.focus" >
