走进组件中的$attrs和$listeners的应用舞台

2023-11-30 13:39:45

组件通信的多种方式
在当今前端界，组件通信一直是绕不开的一个话题。组件通信可以有以下方式：

props
emit & on
vuex
事件总线
provide & inject

每个通信方式都有各自的适用场景，此处不再赘述。

本篇文章，我想着重谈谈attrs和listeners两个神奇的属性。这两个属性没有在 Vue 文档中明确提及，但是它们确实存在，并且在某些情况下非常有用。

认识$attrs

attrs 属性是一个只读属性，它包含了父组件传递给子组件的所有属性，但不包括 props。也就是说，如果父组件传递给子组件一个不是props的属性，那么这个属性将被放在attrs中。

<!-- 父组件 -->
<template>
  <child-component :name="name" age="20"></child-component>
</template>

<!-- 子组件 -->
<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ $attrs.age }}</p>
  </div>
</template>

在上面的例子中，子组件通过$attrs.age访问到了父组件传递的age属性。

认识$listeners

listeners 属性也是一个只读属性，它包含了父组件传递给子组件的所有事件监听器。也就是说，如果父组件给子组件添加了一个事件监听器，那么这个监听器将被放在listeners中。

<!-- 父组件 -->
<template>
  <child-component @click="handleClick"></child-component>
</template>

<!-- 子组件 -->
<template>
  <div @click="$listeners.click">
    点击我
  </div>
</template>