vue3 跨组件传参

//父
<template>
    <div style="width: 400px;height: 400px; background: aquamarine;">
        <p>高级</p>
        <son></son>
    </div>
</template>
<script setup>
import { provide, ref } from 'vue';
import son from './son.vue'

let num = ref(0)

const fun = (val) => {
    num.value += val
}
provide('num', num)//变量
provide('chage', fun)//方法
</script> 

//中级son.vue
<template>
    <div style="width: 300px;height: 300px; background: pink;">
        中级
        <grandson></grandson>
    </div>
</template>

<script setup>
import grandson from './grandson.vue'
</script>

//最低级grandson.vue
<template>
    <div style="width: 200px;height: 200px; background: bisque;">
        低级<br />
        总赞数{{ num }}
        <button @click="zan">赞+10</button>
    </div>
</template>
<script setup>
import { inject } from 'vue';
let num = inject('num')
const fun = inject('chage')
const zan = () => {
    fun(10)
}
</script>