请教:关于provide/inject在vue3的使用?

需求:
我有一个父级组件,provide一个参数。
子组件通过inject拿到参数

这个很简单的需求。但是问题在

  1. 通过composition-api的话,这个provide就是文件级别的。这样的话就会导致只要引用了这个文件,他们的key其实就是同一个

这样的话不就乱套了?其他组件引用这个问题,结果互相改动。并没有办法独立出来

  1. 通过Vue2的方式,作为组件创建时的函数
    {
    provide: {}
    }

{
inject: {}
}

这个方法在vue2中很正常,通过this.xxx获取

但是在vue3中没有this,setup里的ctx也不包含inject

导致只能通过inject(‘xxx’)拿到,拿就更不科学了。因为vue2没办法创建Symbol的可以,那么理论上这个xxx如果在别的组件也是同名,不久又混在一起了?

所以该如何解决这个问题

总结就是我需要在父组件创建一个provide,并传递给子组件

你有没有遇到过 provide注入的数据在子组件使用刷新数据丢失情况 刷新前数据是有的

我是这样做的,先做一个js文件,里面写一个对象,设置一个flag属性,值是symbol的。
然后写两个函数(属性),一个是provide 注入数据,一个是通过inject 获取数据,这样存入还是获取,都可以用同一个 symbol了。

然后在组件里面import 这个js文件,父组件调用注入的函数,子组件调用获取的函数。

注意,函数要在setup函数内直接调用,不能在各种事件里面调用。