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\'/>

　　非常的方便！