VUE3---组件间通信（provide 与 inject）

provide与inject

• 作用:实现祖与后代组件间通信

• 套路:父组件有一个provide选项来提供数据,子组件有一个inject选项来开始使用这些数据

• 具体写法

1.祖组件
    setup(){
        let car = reactive({
            name:'宝马',
            price:'40'
        })

        provide('car',car) //给自己的后代组件传递数据
    }

2.后代组件中:
    let car = inject('car')
    return {
        car
    }

App.vue

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

<script>
import { reactive, toRefs } from '@vue/reactivity'
import Child from './components/Child.vue'
import { provide } from '@vue/runtime-core'
export default {
  name:'App',
  components:{
    Child
  },
  setup(){
    let car = reactive({
      name:'宝马',
      price:'40'
    })

    provide('car',car) //给自己的后代组件传递数据

    return {...toRefs(car)}
  }
}
</script>

<style>
  .app{
    background-color: gray;
    padding: 10px;
  }
</style>

Child.vue

<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>

Son.vue

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

<script>
import { inject, toRefs } from '@vue/runtime-core'
export default {
  name:'Son',
  setup(){
      let car = inject('car')

      return {
          car
      }
  }
}
</script>

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