Vue3 ts $attrs 组件通信 祖->孙

一、祖

传送数据给父组件

<Son :a="1" :b="2" :c="3"/>

二、父

转发数据给子组件 $attrs

<GradeSon v-bind="$attrs" />

三、子

接收数据

defineProps(["a", "b", "c"])

案例

祖组件

<template>
<div>祖组件</div>
<Son :a="1" :b="2" :c="3"/>
</template>

<script setup lang="ts" name="App">
import Son from './components/Son.vue';
</script>

子组件

<template>
<div>子组件</div>
<GradeSon v-bind="$attrs" />
</template>

<script setup lang="ts" name="Son">
import GradeSon from './GradeSon.vue';
</script>

孙组件

<template>
  <div>孙组件</div>
  <h2>a:{{ a }}</h2>
  <h2>b:{{ b }}</h2>
  <h2>c:{{ c }}</h2>
</template>

<script setup lang="ts" name="GradeSon">
defineProps(["a", "b", "c"])
</script>