vue3中的$attrs

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

父组件

<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>