provide 的使用方法： provide('money', money)

inject 的使用方法： const money = inject('money')

父组件

<template>
  <div class="app-container">
    <h1>APP 根组件 -- {{money}}</h1>
    <hr
    <Son />
  </div>
</template>

<script>
import Son from './son.vue'
import { reactive, toRefs, ref, onMounted, onUnmounted, provide } from 'vue'
export default {
  name: 'App',
  components: {
    Son
  },

  setup() {
    const money = ref(100)

    // 将数据传递给后代
    provide('money', money)

    // 谁提供的数据，就需要在谁身上修改
    const changeMoney = val => {
      console.log('changMoney')
      money.value = money.value - val
    }

    // 向外提供方法
    provide('changeMoney', changeMoney)

    return { money, changeMoney }
  }
}
</script>

<style>
</style>

子组件

<template>
  <h1>Son 组件 -- {{money}}</h1>
  <button @click="change">修改数据</button>
  <hr>

  <grand-son />

</template>

<script>
import GrandSon from './GrandSon.vue'
import { inject } from 'vue'
export default {
  name: 'Son',
  components: {
    GrandSon
  },

  setup() {
    // 接收数据
    const money = inject('money')
    // 接收父组件的方法
    const changeMoney = inject('changeMoney')
    // 调用父组件中的方法，改变父组件定义的值
    const change = () => {
      changeMoney(20)
    }

    return { money, change }
  }
}
</script>

<style>
</style>

子孙组件

<template>
  <h1> GrandSon 组件 -- {{money}}</h1>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'GrandSon',
  setup() {
    const money = inject('money')

    return { money }
  }
}
</script>

<style>
</style>