vue3 使用$attrs 进行祖孙通信

场景：需要在子组件中操作祖组件事件

用法：使用 v-bind="$attrs" 和 useAttrs

嵌套关系： app -> Person -> Son

//App.vue 
//1、在祖组件中 添加回调函数

<script setup lang="ts">
import Person from './components/Person.vue'
function callBack(data){
  console.log('接收孙组件回调',data);
}
</script>
<template>
<div>
  <Person @listen="callBack"/>
</div>
</template>

//Person.vue 
//2、添加 v-bind="$attrs"
<script setup lang="ts">
import Son from './Son.vue'
</script>
<template>
<div>
  <Son v-bind="$attrs"/>
</div>
</template>

<style scoped>
</style>

//Son.vue 
//3、使用useAttrs接收祖组件事件，注意：方法为 on + '事件名'(第一个字母大写) listen -> onListen 

<script setup lang="ts">
import {useAttrs} from 'vue'
const $useAttrs = useAttrs()
$useAttrs.onListen("火箭")
</script>