vue3.0-第八章之provide/inject

provide/inject

实现祖孙组件之间的值传递

父组件：
用provide传递值到子组件和孙子组件

<template>
    <div class="parent">
        <h3>我是parent组件{{name}}-{{price}}</h3>
        <child/>
    </div>
</template>
<script>
import { reactive, toRefs ,provide } from '@vue/reactivity'
import child from './child.vue'
export default {
    name:"parent",
    components:{child},
    setup(){
        let car = reactive({name:"奔驰",price:"40w"});
        provide('car',car)//第一个参数是key，第二个参数是穿过去的value值
        return {...toRefs(car)}
    },
    
}
</script>

子组件或孙子组件接受：
inject去接收传递过来的值

<template>
    <div class="son">
        <h3>我是parent组件{{car.name}}-{{car.price}}</h3>
    </div>
</template>
<script>
import { inject } from '@vue/reactivity'
export default {
    name:"son",
    components:{},
    setup(){
        let car = inject("car");
        return {car}
    },
    
}
</script>