vm.$attrs

包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒(méi)有聲明任何prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過(guò) v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級(jí)別的組件時(shí)非常有用。

簡(jiǎn)單點(diǎn)講就是包含了所有父組件在子組件上設(shè)置的屬性（除了prop傳遞的屬性、class 和 style ）。

<!-- 在父組件中傳入total/disabled/visible/toa屬性，監(jiān)聽(tīng)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已經(jīng)通過(guò)props傳遞，所以$attrs中不會(huì)包含此屬性）
• 打印$listeners， 直接輸出所有的方法

vm.$listeners

包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用。

簡(jiǎn)單點(diǎn)講它是一個(gè)對(duì)象，里面包含了作用在這個(gè)組件上所有的監(jiān)聽(tīng)器（監(jiān)聽(tīng)事件），可以通過(guò) v-on="$listeners" 將事件監(jiān)聽(tīng)指向這個(gè)組件內(nèi)的子元素（包括內(nèi)部的子組件）。
為了查看方便，我們?cè)O(shè)置inheritAttrs: true,后面補(bǔ)充一下inheritAttrs。

<!--接著上面，直接綁定父組件除了props/class/style 以外的所有屬性。將父組件的事件監(jiān)聽(tīng)指向子組件-->
<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" />