provide與inject
作用：實現祖孫元件間的通訊
例項：
父元件

<script setup name="Parent">
    import Child from './components/Child.vue'
    import {reactive,provide} from 'vue'
    let  cars=reactive({
        name:'賓士',
        price:'100W'
    })
    provide('cars',cars)
</script>
<template>
    <div class="Parent">我是祖元件{{cars.name}}---{{cars.price}}
        
 
<Child/>
    </div>
</template>
<style>
.Parent{
    background-color: aqua;
    width: 100%;
    height: 200px;
}
</style>

子元件

<script setup name="Child">
    import Son from './Son.vue'
    
</script>
<template>
    <div class="Child">
        <h3>我是child元件</h3>
        <Son/>
    </div>
    
</template>
<style>
.Child{
    background
 
-color: blanchedalmond;
    width: 100%;
    height: 100px;
}
</style>

孫元件

<script setup name="Son">
import {inject} from 'vue'
const cars=inject('cars')
</script>
<template>
    <div class="Son">
        <h3>我是son元件</h3>
        {{cars.name}}
    </div>
    
</template>
<style>
.Son{
    background
 
-color: brown;
    width: 100%;
    height: 50px;
}
</style>