Vue.js 中 $attrs 和 $listeners 的奥秘

2024-01-19 14:38:28

在 Vue.js 的世界中，$attrs 和 $listeners 这两个属性扮演着举足轻重的角色，它们使子组件能够接收和响应来自父组件的数据和事件。本文将深入探究这两个属性的用法，让你充分理解它们的强大功能。

解密 `$attrs`

$attrs 属性就像一个宝箱，里面藏着父组件传递给子组件的所有非 prop 属性。有了 $attrs，子组件可以访问父组件传来的任何额外数据，而无需显式声明它们。这极大地简化了子组件的开发，因为它们不必担心与父组件的通信协议。

举个例子，考虑一个 <user-card> 组件，它需要显示用户的姓名和头像。父组件可以像这样使用该组件：

<template>
  <user-card name="John Doe" avatar="https://example.com/avatar.png"></user-card>
</template>

在 <user-card> 组件中，我们可以使用 $attrs 访问父组件传递的非 prop 属性：

<template>
  <div>
    <h1>{{ $attrs.name }}</h1>
    <img :src="$attrs.avatar" alt="Avatar" />
  </div>
</template>

掌控 `$listeners`

与 $attrs 相对应的是 $listeners 属性，它收集了父组件监听在子组件上的所有事件。有了 $listeners，子组件可以响应父组件的事件，从而实现双向通信。

让我们扩展一下之前的 <user-card> 组件示例，加入一个 click 事件处理程序，当用户点击卡片时，通知父组件：

<template>
  <div @click="$listeners.click()">
    <h1>{{ $attrs.name }}</h1>
    <img :src="$attrs.avatar" alt="Avatar" />
  </div>
</template>

在父组件中，我们监听子组件的 click 事件：

<template>
  <user-card name="John Doe" avatar="https://example.com/avatar.png" @click="onUserCardClick"></user-card>
</template>

<script>
export default {
  methods: {
    onUserCardClick() {
      console.log("User card clicked!");
    },
  },
};
</script>