vue中二次封裝別人組件，動態傳屬性使用v-bind="$attrs" 和 v-on="$listeners"

當我們去二次封裝別人組件時，可能別人組件上有很多屬性，我們不想再次重寫一遍

這時候就可以使用v-bind="$attrs" 和 v-on="$listeners"。這是vue 2.4 版本提供

 vm.$attrs 是一個屬性，其包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。這些未識別的屬性可以通過 v-bind="$attrs" 傳入內部組件。未識別的事件可通過v-on="$listeners"傳入。

舉個例子，比如我創建了我的按鈕組件myButton，封裝了 element-ui 的 el-button 組件（其實什么事情都沒做），在使用組件 <my-button />時，就可以直接在組件上使用 el-button 的屬性,不被 prop 識別的屬性會傳入到 el-button 元素上去

 

<template>
  <div>
    <el-button v-bind="$attrs">確定</el-button>
  <div>
</template>

// 父組件使用
<my-button type='primary' size='mini'/>

　　非常的方便！