Vue 中 $attrs 和 $listeners 深入理解，助力组件间高效数据传递

2023-09-12 00:06:59

前言
在 Vue 的组件化开发中，多级组件嵌套需要传递数据时，通常使用的方法是通过 vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点小题大做。

Vue 提供了两个属性 $attrs 和 $listeners，可以用来传递数据和事件，这两个属性可以帮助我们轻松实现组件间的数据传递，而无需使用 vuex。

$attrs

$attrs 属性包含了父组件传递给子组件的所有属性，但不包含 props。父组件传递给子组件的 props 是子组件显式声明的，而 $attrs 包含了除 props 之外的所有属性。

我们可以通过 $attrs 来访问父组件传递给子组件的数据，例如：

<template>
  <div>
    <p>Name: {{ $attrs.name }}</p>
    <p>Age: {{ $attrs.age }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: ['name', 'age']
}
</script>

在上面的示例中，ChildComponent 组件接收了两个 props：name 和 age。$attrs 属性包含了父组件传递给子组件的所有属性，但不包含 props。因此，我们可以通过 $attrs 来访问父组件传递给子组件的 address 和 phone 属性。

$listeners

$listeners 属性包含了父组件传递给子组件的所有事件监听器。父组件传递给子组件的事件监听器是子组件显式声明的，而 $listeners 包含了除事件监听器之外的所有属性。

我们可以通过 $listeners 来监听父组件传递给子组件的事件，例如：

<template>
  <div>
    <button @click="$listeners['button-click']">Click me</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: ['name', 'age']
}
</script>

在上面的示例中，ChildComponent 组件监听了父组件传递给子组件的 button-click 事件。$listeners 属性包含了父组件传递给子组件的所有事件监听器，但不包含事件监听器。因此，我们可以通过 $listeners 来监听父组件传递给子组件的 button-click 事件。