vue $attrs, $listeners

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" />