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

引入

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

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

该特性的缺位，使得

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

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

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

解决方案

父辈组件

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

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

data() {
     
		return {
     
			ParentLiveList: 'I am default value.'
		}
	},
provide: function() {
     
		return {
     
			getParentLiveList: () => this.ParentLiveList
		}
	}

子辈组件

在子辈下层组件中，这样。
inject父辈提供的属性（函数），并实现基于调用此函数的computed函数，即可实现子辈组件中，childLiveList是动态绑定父辈的ParentLiveList啦！

inject: ["getLiveList"],
computed: {
     
		childLiveList: function() {
     
			return this.getParentLiveList()
		}
	},
	// 至此，this.childLiveList已经绑定了遥远的父辈的ParentLiveList
watch: {
     
		childLiveList: function() {
     
			if (this.childLiveList != 'I am default value.') {
     
				//响应livelist的变化
			}
		}
	},