provide 父组件数据传递给后代组件数据

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

<script>
import Child from "@/components/Child"
import { provide, reactive,toRefs } from "vue"
export default {
  name: 'App',
  components:{
      Child
  },
  setup() {
      let car=reactive({
        name:'奔驰',
        price:'50W'
    })
    provide('car',car)//给自己的后代组件传递数据
    return{
        ...toRefs(car)
    }
  }
}
</script>

<style>
    .main{
        background-color: wheat;
        padding: 10px;
        /* height: 100vh; */
    }
</style>

inject 后代组件进行数据接收

<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')
     console.log(car)
     return{
         car
     }
  }

}
</script>

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