作用是可以看到父组件给子组件传过的内容，子组件没有使用

父组件

<template><div class="father"><h3>父组件</h3><Child :a="a" :b="b" :c="c" :d="d" :aaa="aaa" v-bind="{x:'pp',y:'y'}"></Child></div>
</template><script setup lang="ts" name="Father">import Child from './Child.vue'import {ref} from 'vue'let a = ref('1')let b = ref('2')let c = ref('3')let d = ref('4')function aaa(value:any){a.value = value}
</script><style scoped>.father{background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}
</style>

子组件

<template><div class="child"><h3>子组件</h3>这是父组件传的<hr><!-- {{ a }} --><GrandChild v-bind="$attrs"></GrandChild></div>
</template><script setup lang="ts" name="Child">import GrandChild from './GrandChild.vue'// defineProps(['a'])
</script><style scoped>.child{margin-top: 20px;background-color: skyblue;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;}
</style>

孙组件

<template><div class="grand-child"><hr>孙{{ a.a }}<!-- {{ aqq.b }}{{ aqq.x }} --><button @click="q">按钮</button></div>
</template><script setup lang="ts" name="GrandChild">
let a = defineProps(['a','aaa'])
function q(){console.log(a.aaa(666),'aqq')
}
</script><style scoped>.grand-child{margin-top: 20px;background-color: orange;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;}
</style>