Vue中$attrs、$listeners的用法总结

用法如下：

1、v-on="$listeners"

父组件A，子组件B，孙组件C。
C组件中emit事件后，在B中可以直接使用v-on="$listeners"接收，此时可以在A组件中的B上直接使用C中emit出来的事件。

2、v-bind="$attrs"
父组件A，子组件B，孙组件C。
A上设置值，若没在B上用props进行接收，则可以直接在B中的C设置v-bind="$attrs"，此时相当于把属性直接设置在C上。

 

这两个的作用，主要是用在二次封装某些组件的时候，比如二次封装elementUI 或者antd 组件的时候，使用这样的方法，不需要知道组件具体的属性或者参数，即可实现相应的封装功能。

 注意：vue3中废弃了$listeners

<script>
export default {
  created() {},
};
</script>

<template>
  <a-button class="add-button-color" v-bind="$attrs" v-on="$listeners">
    <slot>添加</slot>
  </a-button>
</template>
<style lang="less" scoped>
.add-button-color {
  background: linear-gradient(90deg, #4fe073 0%, #00bf60 100%);
  width: 80px;
}
</style>

这样可以实现，包裹本身antd组件的组件，可以传入任何a-button支持的属性或者自定义事件。