vue3版本provide、inject用法

provide、inject

作用：实现祖与后代组件间通信
套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据
祖组件中：

<template>
<div class="app">
  <h3>我是app组件,{{name}}--{{price}}</h3>
  
  <Child />
</div>

  
</template>

<script>
import Child from './components/Child.vue'
import {reactive,toRefs,provide} from 'vue'
export default {
  name: 'App',
  components: {
    Child
  },
  setup(props) {
    let car=reactive({
      name:'奔驰',
      price:'40w'
    })
     
    provide('car',car)//两个参数，给自己后代组件传递数据
    return {...toRefs(car)}
  }
}
</script>
<style scoped>
.app{
  background: gray;
  padding: 10px;
}
</style>

后代组件中：

<template>
<div class="son">
  <h3>我是son组件(孙))</h3>
  {{car.name}}
----{{car.price}}
<!-- {{car.name}} -->
</div>

  
</template>

<script>
import {inject} from 'vue'

export default {
  name: 'Son',
  components: {

  },
      setup(props) {
      let car= inject('car')
      console.log(car)
      return {car}
    }
}
</script>
<style scoped>
.son{
  background: orangered;
  padding: 10px;
}
</style>