1， $listeners
父级元素
<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 监听器将静默失败。它不会产生任何报错，但是 onFocus 处理函数不会如你预期地被调用。
为了解决这个问题，Vue 提供了一个 $listeners 属性，它是一个对象，里面包含了作用在这个组件上的所有监听器
有了这个 $listeners 属性，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 <input> 的你希望它也可以 配 合 v-model 工作的组件来说，为这些监听器创建一个类似下述 inputListeners 的计算属性通常是非常有用的
1 <input 2 type="num" 3 placeholder="请输入验证码" 4 maxlength="6" 5 v-bind="$attrs" 6 v-bind:value="value" 7 v-on="inputListeners" 8 /> 9
inputListeners: function () { let vm = this return Object.assign({}, this.$listeners, { focus: function () { if (event.target.value.length) { vm.showClose = true } }, input: function (event) { vm.$emit(‘input‘, event.target.value) } } ) }
2，inheritAttrs 配合 $attr使用
在Vue2.4.0,可以在组件定义中添加inheritAttrs：false，组件将不会把未被注册的props呈现为普通的HTML属性。但是在组件里我们可以通过其$attrs可以获取到没有使用的注册属性，如果需要，我们在这也可以往下继续传递。
原文：https://www.cnblogs.com/sanye00liubingjian/p/10711137.html