16. 自定义事件

事件名称

不同于组件和 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" >