将原生事件绑定到组件2

v-on 的 .native 修饰符：

父：<base-input v-on:focus.native="onFocus"></base-input>

 

子：<label>

{{ label }}

<input

v-bind="$attrs"

v-bind:value="value"

v-on:input="$emit('input', $event.target.value)" >

</label>

父级的 .native 监听器将静默失败。

解决方案：

$listeners属性：

配合 v-on="$listeners"将所有的事件监听器指向这个组件的某个特定的子元素。

Vue.component('base-input', {

inheritAttrs: false,

props: ['label', 'value'],

computed: {

inputListeners: function () {

var vm = this

// `Object.assign` 将所有的对象合并为一个新对象

return Object.assign({},

// 我们从父级添加所有的监听器 this.$listeners,

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> ` })