Vue 中如何使用 $attrs 和 $listeners？

推荐答案

在 Vue 中，$attrs 和 $listeners 是用于处理组件间属性和事件传递的两个重要属性。

使用 $attrs

$attrs 包含了父组件传递给子组件的所有非 prop 属性。你可以通过 v-bind="$attrs" 将这些属性传递给子组件内部的元素。

// www.javascriptcn.com code example
<template>
  <div>
    <child-component v-bind="$attrs"></child-component>
  </div>
</template>

<script>
export default {
  inheritAttrs: false, // 阻止默认行为
};
</script>

使用 $listeners

$listeners 包含了父组件传递给子组件的所有事件监听器。你可以通过 v-on="$listeners" 将这些事件监听器传递给子组件内部的元素。

// www.javascriptcn.com code example
<template>
  <div>
    <child-component v-on="$listeners"></child-component>
  </div>
</template>

<script>
export default {
  inheritAttrs: false, // 阻止默认行为
};
</script>

结合使用 $attrs 和 $listeners

你可以同时使用 $attrs 和 $listeners 来传递属性和事件。

// www.javascriptcn.com code example
<template>
  <div>
    <child-component v-bind="$attrs" v-on="$listeners"></child-component>
  </div>
</template>

<script>
export default {
  inheritAttrs: false, // 阻止默认行为
};
</script>

本题详细解读

$attrs 的作用

$attrs 是一个包含了父组件传递给子组件的所有非 prop 属性的对象。这些属性通常是没有在子组件的 props 中声明的属性。通过 v-bind="$attrs"，你可以将这些属性传递给子组件内部的元素。

$listeners 的作用

$listeners 是一个包含了父组件传递给子组件的所有事件监听器的对象。这些事件监听器通常是没有在子组件的 emits 中声明的事件。通过 v-on="$listeners"，你可以将这些事件监听器传递给子组件内部的元素。

inheritAttrs 的作用

inheritAttrs 是一个布尔值，默认为 true。当设置为 false 时，Vue 不会将未在 props 中声明的属性自动绑定到组件的根元素上。这通常与 $attrs 一起使用，以便更灵活地控制属性的传递。

实际应用场景

在实际开发中，$attrs 和 $listeners 常用于创建高阶组件或封装第三方组件。通过这两个属性，你可以轻松地将父组件的属性和事件传递给子组件，而不需要在子组件中显式声明所有的 props 和 emits。

注意事项

• 使用 $attrs 和 $listeners 时，确保子组件的根元素能够正确处理这些属性和事件。
• 如果子组件的根元素是一个原生 HTML 元素，Vue 会自动将 $attrs 中的属性绑定到该元素上，除非你将 inheritAttrs 设置为 false。