Vue 进阶面试题, Vue 的 attrs 和 listeners 分别有哪些使用场景?

Step 1

Q:: Vue 中的 attrs 和 listeners 是什么？

A:: 在 Vue 中，attrs 和 listeners 是两个特殊的对象，通常用于在父组件中传递属性和事件到子组件时使用。attrs 包含了传递给组件但没有在组件中显式声明的非 prop 属性，通常这些属性会自动绑定到根元素上。listeners 则是一个对象，包含了父组件传递给子组件的所有事件监听器，类似于 v-on 绑定的事件。

Step 2

Q:: 如何在 Vue 组件中正确使用 attrs？

A:: 在 Vue 组件中，如果你想要将未声明的属性传递到根元素上，可以通过 $attrs 对象来实现。例如：<div v-bind="$attrs"></div>。这在创建高度可复用的组件时特别有用，比如包装组件（wrapper components），以确保传递给组件的所有属性都能正确应用到根元素。

Step 3

Q:: 在 Vue 组件中使用 listeners 的场景有哪些？

A:: 当你构建一个封装组件或者包装组件时，可以通过 $listeners 来将所有事件监听器转发到子组件或者根元素。这样可以确保父组件传递的所有事件监听器都能够被触发。例如：<button v-on="$listeners"></button>。这个特性在开发第三方组件库或创建需要复用的 UI 组件时尤为重要。

Step 4

Q:: Vue 3 中为什么移除了 $listeners？

A:: 在 Vue 3 中，$listeners 被移除了，因为新的组件绑定机制让事件监听器和普通属性的传递方式更为统一。事件监听器现在直接通过 attrs 传递，减少了 API 的复杂性。例如，在 Vue 3 中，你可以直接通过 v-bind="$attrs" 绑定所有属性和事件。