Vue3学习：其它组合式API：provide 与 inject

provide：提供数据 inject：注入数据

作用：实现祖与后代组件间通信（祖孙组件间通信） 父子props

套路：祖组件有一个 provide 选项来提供数据，孙组件有一个 inject 选项来开始使用这些数据

具体写法：

祖组件中：

<template>
    <div class="app">
        <h3>我是App组件（祖），{{name}}--{{price}}</h3>
        <Child/>
    </div>
</template>

<script>
    import { reactive,toRefs,provide } from 'vue'
    import Child from './components/Child.vue'
    export default {
        name:'App',
        components:{Child},//注册子组件
        setup(){
        //数据
            let car = reactive({name:'奔驰',price:'40W'})
    
            provide('car',car) //给自己的后代组件传递数据
        //外部显示
            return {...toRefs(car)}
        }
    }
</script>
<style>
    .app{
        background-color: gray;
        padding: 10px;
    }
</style>

子组件：

<template>
    <div class="child">
        <h3>我是Child组件（子）</h3>
        <Son/>
    </div>
</template>

<script>
    import Son from './Son.vue'
    export default {
        name:'Child',
        components:{Son}, //注册一下
    }
</script>

<style>
    .child{
        background-color: skyblue;
        padding: 10px;
    }
</style>

孙组件：

<template>
    <div class="son">
        <h3>我是Son组件（孙），{{car.name}}--{{car.price}}</h3>
    </div>
</template>

<script>
    import {inject} from 'vue'
    export default {
        name:'Son',
        setup(){
            let car = inject('car')//得到数据
            return {car}//输出显示
        }
    }
</script>

<style>
    .son{
        background-color: orange;
        padding: 10px;
    }
</style>

实现了祖孙通信