$attrs

$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）。
具体说明：$attrs是一个对象，包含所有父组件传入的标签属性。

注意：$attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了)

1<template>
2  <h2>父组件</h2>
3  <hr/>
4  <child-comp :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" :updateA="updateA"/>
5
6</template>
7
8<script lang="ts" name="ParentComp" setup>
9import ChildComp from "@/components/ChildComp.vue";
10import {ref} from "vue";
11
12let a = ref(1)
13let b = ref(2)
14let c = ref(3)
15let d = ref(4)
16
17function updateA(value) {
18  a.value = value
19}
20
21</script>

1<template>
2  <h2>子组件</h2>
3  <hr/>
4  <posterity-comp v-bind="$attrs"/>
5</template>
6
7<script lang="ts" name="ChildComp" setup>
8import PosterityComp from "@/components/PosterityComp.vue";
9</script>

1<template>
2  <h2>后代组件</h2>
3  <h4>a：{{ a }}</h4>
4  <h4>b：{{ b }}</h4>
5  <h4>c：{{ c }}</h4>
6  <h4>d：{{ d }}</h4>
7  <h4>x：{{ x }}</h4>
8  <h4>y：{{ y }}</h4>
9  <button @click="updateA(666)">点我更新A</button>
10</template>
11
12<script lang="ts" name="PosterityComp" setup>
13defineProps(['a', 'b', 'c', 'd', 'x', 'y', 'updateA'])
14</script>

:::

$attrs#

$attrs