关于vue的$attrs和$listeners

一、介绍

$attrs 和 $listeners 是vue2中为我们创建多层次组件提供的一种便利。

正常情况下，当我们封装一个组件时，我们需要用到emit和props来对父子组件进行传值和绑定事件。

假设我们定义了这个组件为C，当我们将他应用于组件B中，我们可以用以上所说的方式进行通讯，但是若是组件B又被应用于组件A中的时候，我们又想让组件C和组件A进行挂钩，那么我们有以下两种方式：

1.A->B->C，利用prop和emit，将B当作中间人进行传值，这样属实是麻烦，就比如你妈想喊你回家吃饭的时候，还非得要先喊你同学去喊你，不是一次两次，是每次都这样哦。于是乎就引出了以下的方式。

2.利用 $attrs 和 $listeners,它可以让我们忽略中间层B，直接一步到位，让你妈直接找到你，通过这种一对一的形式进行传递，这样就不会出现一个无用的中间人了。当然如果硬要说你妈很忙，非得找你同学那就没办法了。

二、使用

使用该种方式传值也很简单，只需要把B组件变成一台电话就OK了，架起一个能够让组件A和组件C直接沟通的桥梁。A和C正常地使用prop和emit就可以进行交流了。

// 组件A
<componentB :name="name"></component>

// 组件B
<componentC v-bind="$attrs" v-on="$listeners"></component>

// 组件C
<p @click="handleSomething">大家好，我是组件C</p>
 
<script lang='ts'>
props:[ name ]
function handleSomething () {
   this.$emit('回家吃饭了')
}
</script>
 

另外再说明一点，vue3中移除了$listeners，统一使用 $attrs 就行了，绑定了attrs就相当于两个都绑定了。

结束

当我们定义一个多层级的组件时可以考虑使用这样的方式去实现组件通讯，这样的话可以减少部分代码，也可以使代码整体更加的整洁。

以下是官方的参考地址：vue3相关的迁移策略