vue3中的provide与inject跨层级组件(祖孙)间通信

· provide和inject提供依赖注入，功能类似 vue2.x 的provide/inject

· 实现跨层级组件(祖孙)间通信

子或孙子组件接收到的数据可以用于读取显示，也可以进行修改，同步修改父（祖）组件的数据。

注意：无论子组件是否接收了该数据，孙子组件都可使用inject接收修改该数据。

（祖）父组件代码：

<template>
  <div style="font-size: 14px">
    <h3>测试provide与inject跨层级组件(祖孙)间通信</h3>
    <Child />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  onMounted,
  toRefs,
  provide,
} from 'vue'
import Child from './Child.vue'
// vue3.0语法
export default defineComponent({
  name: '父组件名',
  components: {
    Child,
  },
  setup() {
    const state = reactive({
      id: '',
      user: {
        name: '张三',
        age: 0,
      },
    })

    onMounted(() => {
      // 模拟一个接口请求
      setTimeout(() => {
        state.id = '父组件请求接口得来的id'
        state.user = {
          name: '张三丰',
          age: 18,
        }
      }, 2000)
    })
    provide('state', state)

    re