Vue前端知识——自定义事件（vue自定义事件修饰符）

1，事件名

不同于组件和prop，事件名不存在任何自动化的大小写转换。触发的事件名称需要完全匹配监听这个事件所用的名称。

v-on事件监听器在DOM模板中会被自动转换为全小写，因此推荐始终使用kebab-case的事件名。

2，自定义组件的v-model

使用自定义组件的v-model时，需要注意到v-model会和组件中的prop和input事件相连接，这个是组件的v-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后，会把lovingVue传到checked的prop里，当触发base-checkbox后，lovingVue也会跟着实际情况进行更新。

3，将原生事件绑定到组件

监听事件时，直接采用v-on的.native修饰符，有时候这是有效的，不过在尝试监听一个类似<input>的非常特定的原生时，并不是一个好主意。

解决这个问题，使用$listeners property，然后配合v-on="$listeners"将所有事件监听器指向这个组件的某个特定的子元素。

对于类似<input>也可以配合v-model工作的组件来说，也可以为监听器创建一个类似下述inputListeners的计算属性。

Vue.component('base-input', {
inheritAttrs: false, props: ['label', 'value'],
computed: { inputListeners: function() {
var vm = this
// `Object.assign` 将所有的对象合并为一个新对象
return Object.assign({},
// 我们从父级添加所有的监听器
this.$listeners,
// 然后我们添加自定义监听器，
// 或覆写一些监听器的行为 {
// 这里确保组件配合 `v-model` 的工作
input: function(event) { vm.$emit('input', event.target.value) } } ) } },
template: `
 <label>
 {{ label }}
 <input
 v-bind="$attrs"
 v-bind:value="value"
 v-on="inputListeners"
 >
 </label>
 ` })

上述的<base-input>组件是一个完全透明的包裹器，可以完全像一个普通的<input>元素一样使用，所有根它相同的attribute和监听器都可以工作，不必再使用.native监听器。

3，.sync修饰符

在一些情况下，可能需要对prop进行双向绑定，这里的双向绑定并不是真正意义上的双向绑定。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：

<text-document  v-bind:title="doc.title"   v-on:update:title="doc.title = $event">
</text-document>

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

<text-document    v-bind:title.sync="doc.title">
</text-document>

可以省略上面两个步骤.