之前本人写过几篇element ui源码解析，其中提到provide/inject，当时只是匆匆带过，没有做深入研究，直到后来一次开发，需要实现孙组件更改父组件的值才想起来，原来这一对属性有如此大的用途且相当方便，因此这里做个总结，顺便做个简单的DEMO。
PS:
下面提到的父组件，子组件，孙组件只是为了说明三个层级，方便大家理解而已
实现的场景如下：
1、三个组件：父组件，子组件，孙组件，父引用子，子引用孙
2、父组件有个属性：showDia。子组件，孙组件都可能更改这个属性的值，以实现父组件中某个弹窗显示隐藏
第一种实现方法：利用props
由于props只能实现向子组件传递参数不能实现直接向孙组件传递参数，因此每嵌套一级就需要手动传递参数，嵌套层次越深体验就越糟糕，有点像异步请求嵌套，简直是梦魇般的存在
// 父组件引用子组件，需要显式传值 <sonC :fromParentVal="showDia"></sonC> // 子组件引用孙组件，需要显式传值 <grandSonC :fromGrandSonVal="showDia"></grandSonC> // 孙组件要修改父组件showDia的值 this.$parent.$parent.showDia = !this.$parent.$parent.showDia
在孙组件中需要修改父组件值时，有几层嵌套就需要写几个$parent，这样做实在没水平
第二种实现方法：provide/inject
父组件只要提供provide，子组件和孙组件用inject注入即可，看代码
// 父组件提供this对象，供子孙组件注入
provide() {
return {
thisObj: this
}
}
// 子组件注入
inject: ['thisObj']
// 孙组件注入
inject: ['thisObj']
// 孙组件修改父组件的值
this.thisObj.showDia = !this.thisObj.showDia
不管嵌套几级，修改父组件属性都是一样的写法，是不是相当方便