问题

在父元素中使用子组件，在子组件上绑定如点击事件，希望这个点击事件直接绑定到子组件元素上。

解决方式

使用.native修饰符

// 父组件
<base-button text="提交" class="my-style" @click.native="submit" />
...
methods: {
    submit() {
        // ...
    }
}

// baseButton.vue
<template>
    <div class="button">{{text}}</div>
</template>

不加.native修饰符，发现点击时，并不会触发点击事件，也不会执行submit函数。 加上.native修饰符，我们的click事件就绑定到了子组件的根元素上，点击会触发执行submit函数。

新的问题：如果我们不是想绑定到子组件的根元素上怎么办呢？可以使用$listeners

$listener

// 父组件
<base-input label="姓名" :value="userName" @inputValue="inputValue"/>

// baseInput.vue
<template>
    <div class="input-view">
        <span class="label">{{label}}</span>
        <input value="value" @input="inputValueEvent" />
    </div>
</template>
...
methods: {
    inputValueEvent(e) {
        this.$listeners.inputValue(e.target.value)
        // 等价于
        this.$emit(inputValue, e.target.value)
    }
}

使用this.$listeners可以获取到父组件传给子组件的所有绑定的事件 可以使用this.$listeners.eventName()去触发，等价于this.$emit('eventName')

同理，如果想获取到父组件传递给子组件的所有属性，可以使用this.$attrs

inheritAttrs

• 类型 boolean 默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。

注意：这个选项不影响 class 和 style 绑定。