作用是可以看到父组件给子组件传过的内容,子组件没有使用
父组件
<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>