vm.$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
简单点讲就是包含了所有父组件在子组件上设置的属性（除了prop传递的属性、class 和 style ）。
<!-- 在父组件中传入total/disabled/visible/toa属性，监听size-change和current-change方法-->
<pk-pagination :total="pagination.total" disabled visible :toa="1"
@size-change="handleSizeChange" @current-change="handleCurrentChange" @aa="handleCurrentChange"/>
// 在子组件中打印 $attrs, $listeners
export default {
props: {
total: {
type: Number,
default: 0
}
},
mounted() {
console.log(this.$attrs)
console.log(this.$listeners)
}
}
image.png
- 打印 attrs 输出了父组件中的disabled， visible，toa。打印了除props和class，style 之外的所有属性（上面的total已经通过props传递，所以$attrs中不会包含此属性）
- 打印$listeners， 直接输出所有的方法
vm.$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
简单点讲它是一个对象，里面包含了作用在这个组件上所有的监听器（监听事件），可以通过 v-on="$listeners" 将事件监听指向这个组件内的子元素（包括内部的子组件）。
为了查看方便，我们设置inheritAttrs: true,后面补充一下inheritAttrs。
<!--接着上面，直接绑定父组件除了props/class/style 以外的所有属性。将父组件的事件监听指向子组件-->
<el-pagination
:current-page="page"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
size="small"
v-bind="$attrs"
v-on="$listeners" />
