Vue3：provide和inject实现祖组件和后代组件通信

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

具体代码如下：

1. 祖组件中：
<template>
  <div>我的祖组件{{ car }}</div>
  <button @click="car.money++">祖组件按钮</button>
  <hr />
  <ChildC />
</template>

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

export default {
  name: 'App',
  components: { ChildC },
  setup() {
    const car = reactive({
      money: 10,
      name: 'car'
    })
    provide('car', car)

    return {
      car
    }
  }
}
</script>




2. 后代组件中：
<!-- 实现输入框输入内容后，在输入框下的div过2秒显示 -->
<template>
  {{ car }}
  <div>
    <button @click="car.money++">改变祖组件</button>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  name: 'SonC',
  setup() {
    const car = inject('car')

    return {
      car
    }
  }
}
</script>