在Vue中，$attrs 和 $listeners 是两个特别有用的特性，它们允许我们更轻松地实现组件间的通信，尤其是当涉及隔代组件通信时。下面我将详细解释它们的原理并提供一个例子。
原理
$attrs：
$attrs 包含了父作用域中不作为 prop 被识别（且获取）的特性绑定（class 和 style 除外）。
当一个组件没有声明任何 prop 时，$attrs 会包含所有父作用域的绑定（class 和 style 除外）。
可以通过 v-bind="$attrs" 将 $attrs 传入内部组件，实现属性的批量传递。
$listeners：
$listeners 包含了父作用域中的（不含 .native 修饰器的）v-on 事件监听器。
它可以通过 v-on="$listeners" 传入内部组件，使得子组件能够直接监听在父组件上定义的事件。
例子
假设我们有三个组件：A.vue、B.vue 和 C.vue，它们构成了一个隔代组件通信的场景。
A.vue（祖父组件）
vue
<template>
<div>
<b-child :name-to-b="nameToB" :name-to-c="nameToC" @button-click="handleClick"></b-child>
</div>
<script>
import BChild from './B.vue';
export default {
data() {
return {
nameToB: '给B组件的名字',
nameToC: '给C组件的名字',
};
},
components: {
BChild,
},
methods: {
handleClick() {
console.log('按钮被点击了！');
},
},
};
</script>
B.vue（父组件）
vue
<template>
<div>
<p>我是B组件，接收到的名字是：{{ nameToB }}</p>
<c-child v-bind="$attrs" v-on="$listeners"></c-child>
</div>
<script>
import CChild from './C.vue';
export default {
props: ['nameToB'],
components: {
CChild,
},
};
</script>
C.vue（子组件）
vue
<template>
<div>
<p>我是C组件，接收到的名字是：{{ $attrs.nameToC }}</p>
<button @click="$emit('button-click')">点击我，通知A组件</button>
</div>
<script>
export default {
// 这里没有声明任何props，所以$attrs中会包含所有从A组件传递下来的未被子组件声明的属性
};
</script>
在这个例子中，A组件（祖父组件）向B组件（父组件）传递了两个属性（nameToB 和 nameToC）和一个事件监听器（button-click）。B组件使用 v-bind="$attrs" 将未声明的属性（在这里是 nameToC）传递给C组件（子组件），并使用 v-on="$listeners" 将事件监听器传递给C组件。这样，C组件就可以直接访问 nameToC 属性，并触发 button-click 事件，而这个事件最终会被A组件监听到。