vue3的provide函数和inject函数真简单，后组件通讯,子孙父通信。

   使用场景：有个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据

1、父组件里面这样写入

<template>
  <div class="box">
    <h2>父组件{{ num }}元</h2>
    <button @click="num++">加</button>
  </div>
</template>
<script setup>
// 要引入  provide 
import { ref, provide } from "vue";

let num = ref(999); // 数据
// 是将数据发给后代组件 provide
provide("num", num);

// 也可以将函数传到孙子组件
const fn = (value) => {
  console.log("我是孙子传过来的数据", value);
};
provide("fn", fn); // 发送一个方法过去，孙组件可以触发这个函数，也可以发过来参数


</script>

 2、子组件里面这样写

<template>
  <div class="">
    <h2>我是子组件可以享受到父组件发来的数据 {{ num }}</h2>
    <!-- 这个是孙子组件 -->
    <som></som>
  </div>
</template>

<script>
import { inject } from "vue"; // 引入inject 
import som from "../components/som.vue"; // 孙子组件

export default {
  setup(props, { emit }) {
    // 接收父组件传过来的数据，以供使用
    const num = inject("num"); // inject函数接收一下父发过来的数据，要引入
    return {
      num,
    };
  },
  components: { som },
};
</script>

3、孙子组件

<template>
  <div class="">
    <h2>我是孙子组件{{ num }} <button @click="send">我要发给祖宗信息</button></h2>
  </div>
</template>

<script>
import { inject } from "vue";
export default {
  setup(props, { emit }) {
    // 接收祖先传过来的数据
      const num = inject("num");
      console.log(num); // 祖宗传过来的数据
  
   
    const fn = inject("fn"); // 祖宗传过来的函数

   // 不能自己修改数据，遵循单向数据流原则，谁定数据谁修改
    function send() {
      fn("数据66666"); // 给祖宗传参数
    }

    return {
      num,
      send,
    };
  },
  components: {},
};
</script>