provide inject应用及和props对比

之前本人写过几篇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

　　

不管嵌套几级，修改父组件属性都是一样的写法，是不是相当方便