vue3 中的 provide 和 inject 之间通信

实现步骤

代码如下：

爷爷组件

<template>
  <father></father>
</template>

<script>
import Father from '@/components/Father'
import { provide } from 'vue'
export default {
  components: {
    Father
  },
  setup() {
    let name = 'lichenfei'
    // 使用provide配置项注入数据 key - value
    provide('name', name)
  }
}
</script> 

 孙子组件

<template>
  我是子组件
  {{ name }}
</template>

<script>
import { inject } from 'vue'
export default {
  setup() {
    const name = inject('name')
    return {
      name
    }
  }
}
</script>