面试题：Vue 的 attrs 和 listeners 分别有哪些使用场景？

在 Vue 中，$attrs 和 $listeners 是用于处理组件属性和事件的高级特性，尤其在开发高阶组件或封装通用组件时非常有用。以下是它们的详细说明和使用场景：

---

1. $attrs

$attrs 是一个对象，包含了父组件传递给子组件的所有非 props 属性（即未在子组件的 props 中声明的属性）。

使用场景：

• 透传属性：当你需要将父组件传递的属性直接传递给子组件的子元素时，可以使用 $attrs。
• 封装通用组件：在封装通用组件（如自定义输入框、按钮等）时，可以通过 $attrs 将父组件传递的属性透传给内部的 HTML 元素或其他组件。

示例：

<!-- 父组件 -->
<template>
  <ChildComponent class="custom-class" data-test="123" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
};
</script>

<!-- 子组件 -->
<template>
  <div v-bind="$attrs">
    <!-- $attrs 包含了父组件传递的所有非 props 属性 -->
    <p>This is a child component.</p>
  </div>
</template>

<script>
export default {
  // 未声明任何 props
};
</script>

结果：

• $attrs 包含了 class="custom-class" 和 data-test="123"，这些属性会被绑定到子组件的根元素 <div> 上。

---

2. $listeners

$listeners 是一个对象，包含了父组件传递给子组件的所有事件监听器（即 v-on 绑定的事件）。

使用场景：

• 透传事件：当你需要将父组件传递的事件监听器直接传递给子组件的子元素时，可以使用 $listeners。
• 封装通用组件：在封装通用组件时，可以通过 $listeners 将父组件传递的事件透传给内部的 HTML 元素或其他组件。

示例：

<!-- 父组件 -->
<template>
  <ChildComponent @click="handleClick" @focus="handleFocus" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleClick() {
      console.log('Click event triggered');
    },
    handleFocus() {
      console.log('Focus event triggered');
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <button v-on="$listeners">
    <!-- $listeners 包含了父组件传递的所有事件监听器 -->
    Click Me
  </button>
</template>

<script>
export default {
  // 未声明任何事件监听器
};
</script>

结果：

• $listeners 包含了 @click 和 @focus 事件，这些事件会被绑定到子组件的 <button> 元素上。

---

3. 结合 $attrs 和 $listeners

在开发高阶组件时，通常需要同时透传属性和事件。可以通过 v-bind="$attrs" 和 v-on="$listeners" 实现。

示例：

<!-- 父组件 -->
<template>
  <ChildComponent
    class="custom-class"
    data-test="123"
    @click="handleClick"
    @focus="handleFocus"
  />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleClick() {
      console.log('Click event triggered');
    },
    handleFocus() {
      console.log('Focus event triggered');
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <button v-bind="$attrs" v-on="$listeners">
      Click Me
    </button>
  </div>
</template>

<script>
export default {
  // 未声明任何 props 或事件监听器
};
</script>

结果：

• $attrs 包含了 class="custom-class" 和 data-test="123"，这些属性会被绑定到 <button> 元素上。
• $listeners 包含了 @click 和 @focus 事件，这些事件会被绑定到 <button> 元素上。

---

4. 注意事项

• inheritAttrs：默认情况下，父组件传递的非 props 属性会自动绑定到子组件的根元素上。如果不需要这种行为，可以在子组件中设置 inheritAttrs: false。
• props 优先级：如果子组件声明了某个 prop，则该属性不会出现在 $attrs 中。

示例：禁用 inheritAttrs

export default {
  inheritAttrs: false, // 禁用自动绑定到根元素
};

---

总结

• $attrs：用于透传父组件传递的非 props 属性，适合封装通用组件。
• $listeners：用于透传父组件传递的事件监听器，适合封装通用组件。
• 结合使用：在开发高阶组件时，通常需要同时透传属性和事件。

通过合理使用 $attrs 和 $listeners，可以大大提高组件的复用性和灵活性！