vue.js子辈组件访问父辈组件，利用provide/inject动态传参数，实现响应式数据绑定

引入

在vue前端的开发中，难免会遇到子辈组件跨层级访问（祖）父辈组件属性、函数的情况，通常来说，在子父中，我们大多会使用$parent实现，但在跨越层级过多时，就需要provide/inject来实现了。

如果你会搜索到这篇文章，你应该已经发现了：官方的provide/inject组合并不能实现响应式的动态数据绑定，于是官方会推荐你使用vuex（狗头⚠️）

该特性的缺位，使得

父辈组件是ajax异步获取数据，再将数据通过provide传递给子辈组件

的场景下，子辈组件不能顺利拿到异步获取到的数据（因为子辈拿的是初始provide的数据，且数据非响应式，不会动态刷新），

我需要简约、到位的解决。
不想学vuex

解决方案

父辈组件

根据官方文档的阐述：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。我受到了启发

我们可以这样，在父辈上层组件的provide块中，实现一个提供动态值