剖析 Vue 中组件通信的利器：$attrs 与 $listeners

2023-11-11 15:22:42

利用 attrs 和 listeners 提升 Vue 组件通信

在 Vue 的世界中，组件通信是实现数据共享和业务逻辑协同的关键。它决定了不同组件之间的交互方式，并对应用程序的架构和维护产生重大影响。

为了提升组件通信的效率和灵活性，Vue 提供了两个强大的工具：$attrs 和 $listeners。这些属性允许组件之间传递数据和触发事件，从而构建更加动态和可重用的组件。

$attrs：数据传递之桥

想象一下，您需要一个子组件显示由父组件提供的特定数据。使用 $attrs，您可以轻松实现这一点。$attrs 是一个只读对象，包含了父组件传递给子组件的所有数据，除了通过 props 显式声明的数据。

举个例子，假设我们有一个 ParentComponent，它有一个名为 message 的数据：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

在 ChildComponent 中，我们可以使用 $attrs 访问 message 数据：

<template>
  <div>
    <p>{{ $attrs.message }}</p>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

这样，ChildComponent 就可以显示由父组件传递的 message 数据，而无需在 props 中显式声明它。这使得组件更具通用性，可以接收并处理来自不同父组件的数据。

$listeners：事件触发之门

$attrs 负责数据传递，而 $listeners 则负责事件触发。$listeners 是另一个只读对象，它包含了子组件可以触发的所有事件。

回到前面的例子，假设我们希望在点击 ChildComponent 中的一个按钮时触发一个名为 clickMe 的事件：

<template>
  <div>
    <button @click="clickMe">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    clickMe() {
      this.$emit('clickMe')
    }
  }
}
</script>

在 ParentComponent 中，我们可以使用 $listeners 监听 clickMe 事件：

<template>
  <div>
    <child-component @clickMe="handleClickMe"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleClickMe() {
      // 处理 clickMe 事件
    }
  }
}
</script>