博客

vue3中$attrs与$listeners

作用：

• 
  $attrs
  
  : 在A(爷) -> B(父) -> C(子) 的传值的过程中，B组件绑定$attrs，C组件就可直接获取到A组件传入的属性(且该属性未在B组件中未通过props接收)
• 
  $listeners
  
  : 在 C(子) -> B(父) -> A(爷)的触发自定义事件并向上传值的过程中，A组件中可以直接绑定C组件中的事件(且该事件未在B组件中触发)

场景：

封装element组件时，避免麻烦可在封装子组件上v-bind绑定$attrs来让子组件继承element组件的属性，通过v-on绑定$listeners来使子组件继承element组件事件。

• 为二次封装的组件绑定$attrs/$listeners

• 将要做统一处理的数据、属性、方法等写在二次封装的组件中

• 将每个父组件调用时需要变化的属性或方法直接在父组件调用时传入

如下例中的斑马纹属性，有些父组件需要有些不需要，所以直接在父组件调用时传值即可，在二次封装的子组件中则无需再通过props声明

1.继承element的所有属性和方法

子组件中：

<el-table v-if="tableData.length > 0 "
          :data="tableData"
          v-bind="$attrs" 
          row-key="id"
          @selection-change="select"
          ref="tableRef"
            >...</el-table>
<script>
    const props = defineProps({
        将父组件传入并需要处理的属性，在此处声明
    })
    const emit = defineEmits([
  	将父组件绑定并需要处理的事件，在此处声明
   ])
</script>

父组件中：

<My-table :colums=colums stripe  用到ele的什么属性或方法直接在此处绑定即可（子组件中未声明的，此例中如stripe斑马纹属性 ）/>