关于vue.js中 provide/inject的使用

需求场景：

目前有个场景，上方的应用模块的每次切换都决定了下方的接口所获取到的数据，接口都是同一个，但是为了做成动态的变量，将每次上方获取到的值以不同的直段动态的添加到下方的接口中，以获取不同场景下的数据，这是一个弹窗，且上方和下方分别是不同的组件，他们本没有任何联系（耦合性），但是在项目中，可以理解为他们的关系是，都是同一个index.vue文件所引用，属于孙子级别的，为了建立联系，这里我使用了vue.js的provide/inject。

官方介绍：
描述： provide/inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

官方提示： provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

无论多少层都会被子组建拿到
主要用在高阶组件
provide 选项应该是一个对象或返回一个对象的函数。
inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名

本人的项目因为涉及金融行业，所以不适合拿出来操作，因此使用了别的场景项目

正常使用
父组件：

let Provider = {
  provide: {
    name: '张艺兴'
  }
}

子组件：

let Child = {
  inject: ['name'],
  created () {
    console.log(this.name) // => "张艺兴"
  }
}

按照上边的例子，发现如果修改了Provider的name值，Child的name并没有随着更改。官网也说了provide并不是响应的。为了解决这个问题 需要把name变成vue的监听的对象，换句话说就是需要把name变成对象

响应式数据监听处理
例如：监听窗口的改变，将改变的值传递给其他需要的子组件，window.resize只能监听一次。
父组件：（provide ）

data () {
    return {
        screenObj: { // 当前屏幕的宽度，用于响应式处理
            screenWidth: document.body.clientWidth
        }
    }
},
provide () { // 将datas属性提供给子孙组件
   return {
       clientWidth: this.screenObj
   }
},
mounted () {
   window.onresize = () => {
       // 监听窗口变化并将数据响应到子孙组件
       this.screenObj.screenWidth = document.body.clientWidth;
   }
   this.$once('hook:beforeDestroy', () => {
       window.removeEventListener("resize", () => {});
   })
}

子组件：（inject）

inject: ['clientWidth'], // 接收父组件注入的内容
watch: {
    clientWidth: {
        handler (value) {
            this.dynamicCompute(value.screenWidth); // 可以监听到clientWidth的改变
        },
        immediate: true,
        deep: true
    }
},

这样就可以进行响应式处理了，provide提供的对象数据改变之后，子孙组件都可以监听到