vue 父子组件传值之-inject/provide

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

provide和inject是成对出现的，用于父组件向子孙组件传递数据

provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据

直接看项目实际应用代码： 父组件：

	provide() {
		return {
			$dashboard: this
		}
	},
        
        data() {
        return {
                kpiList: []
         }
	},

子孙组件：

inject: ['$dashboard'],
let curKpi = this.$dashboard.kpiList.find(item => item.key == 'productivity')

注： 父组件直接传一个this过去，这样孙子组件会获得爷爷组件的实例对象，这种方式也是响应式的（provide 和 inject 绑定并不是可响应的） 在子孙组件中的数组kpiList是父组件的，可以直接使用。