vue3 provide 和 inject 实现组件间通信

作为vue3的开发初学者，我今天遇到个问题，关于父子组件通信（子孙组件与父组件通信）

需求是这样的：子组件想和爷爷组件通信，孙子组件传递一个事件给爷爷组件，然后在爷爷组件里写监听事件调用叔叔组件的方法。

心路历程：

第一次尝试：

本来想通过爷爷组件provide一个数据，子组件用inject接收，子组件做修改，然后爷爷组件监听provide提供的数据变化调用叔叔组件的方法并传参；然而以失败告终，子组件不能修改inject引入的值。

第二次尝试：

既然provide的值不能修改，那我就换了个思路，利用事件总线传递事件，vue3中的事件总线需要引入第三方组件，mitt，具体可以自行搜索mitt使用方法。最后功能实现，不过我引发我的思考，子组件那么多，每次写个事件总线也不是办法，而且爷爷组件里面代码会非常多，最后放弃这个方法。

第三次尝试：

既然事件总线的方法不是最优的方法，我就考虑将事件总线用vuex代替。vuex的代码比较清晰，孙子组件在vuex中修改数据，爷爷组件通过监听vuex中数据的变化调用叔叔组件方法，然后也是成功了。不过这样写代码量比较大，而且监听都在爷爷组件中，爷爷组件代码量太多了，放弃。

最后:我想到了provide和inject可以传递任何数据，我就尝试将爷爷组件中的叔叔组件的ref通过provide传递给子组件，子组件inject获取爷爷传来的ref，然后直接在子组件方法中调用叔叔组件defineExpose里的方法。这样写代码量少，思路清晰.。

//爷爷组件代码

//这是叔叔组件
<Map ref="mapRef" />

import { provide } from 'vue'
const mapRef = ref<any>()
provide('map', mapRef)

//孙子组件代码
import { inject } from 'vue'
const map:any = inject('map')

const checkEvent = (e:any, i:any) => {
  currentSelect.value = i
  map.value.RemovePoint()
  map.value.AddPoint(point, e.points)
}