Vue3的provide和inject

provide和inject用于实现祖组件与其后代组件（如子组件、孙组件、重孙组件等等）间的通信，有点像Vue2时的事件总线。

具体看个例子吧。项目目录如下。

• main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

• 祖组件App.vue

<template>
    <div class="app">
      <h2>我是祖组件,{{car.brand}}:{{car.price}}</h2>
      <Son/>
    </div>
</template>

<script>
import { reactive,provide} from 'vue';
import Son from "./components/Son.vue";

export default {
  name:"App",
  components:{
    Son
  },
  setup(){
    let car = reactive({
      brand:"BYD",
      price:"30W"
    })
    provide('theCar',car);
    return {
      car
    }
  }

}
</script>

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

• 子组件components/Son.vue

<template>
    <div class="son">
        <h2>我是儿子组件</h2>
        <Grandson/>
    </div>
</template>

<script>
import Grandson from "./Grandson.vue";

export default {
  name:"Son",
  components:{
    Grandson
  }

}
</script>

<style scoped>
.son{
  background: skyblue;
  padding: 10px;
}

</style>

• 孙组件components/Grandson.vue

<template>
    <div class="grandson">
        <h2>我是孙子组件,{{aCar.brand}}:{{aCar.price}}</h2>
    </div>
</template>

<script>
import {inject} from "vue";

export default {
  name:"Grandson",
  setup(){
      let aCar = inject("theCar");
      console.log(aCar);

      return {
          aCar
      }
  }

}
</script>

<style scoped>
.grandson{
  background:orange;
  padding: 10px;
}

</style>

• 启动应用，测试效果
  
  
  祖组件App.vue通过provide提供数据theCar。
  孙组件Grandson.vue通过inject注入数据，从而得到theCar。
  当然，祖组件App.vue、子组件Son.vue，也可以通过provide+inject的方式进行通信，不过通常我们不会这么做，而是通过props。