【Vue】基于$attrs和$listeners封装高级组件

之前在做vue组件扩展的时候，遇到过一些xx的事情，比如基于element-ui的el-table进行组件扩展，支持render/slot双渲染模式，支持分页等。(假设新组件是zl-table)

实际封装中遇到一个巨坑问题是：el-table有那么多v-on和v-bind，之前的处理方案是，在zl-table中用props和$emit转接到el-table上，平白增加很多工作量，而且如果el-table扩展了，zl-table也要扩展。当时就在想，要是能用react就好了，{...props}短短一句全搞定。

相信跟我遇到同样问题的朋友不少，今天重新看官方文档，发现2.4.0新增了两个属性vm.$attrs和vm.$listeners(表白尤大)。上代码

<!-- zl-table内 -->
<el-table v-on="$attrs" v-bind="$listeners">
  <!-- ... -->
</el-table>

官方文档

• vm.$attrs

  包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

  注意：如果在zl-table中声明了属性，那么该属性，并不会传给el-table

• vm.$listeners

  包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。