vue祖孙组件通信传值 provide 与 inject 以及 数据的响应式

vue祖孙组件通信传值 provide 与 inject 以及 数据的响应式

通常，当我们需要从父组件向子组件传递数据时，我们使用 props。但是对于一些深度嵌套的组件，深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。

provide 和 inject无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。解决了跨层级传递属性的不方便。

一、概念解析

• 成对出现：provide和inject是成对出现的
• 作用：用于父组件向子孙组件传递数据
• 使用方法：
  • provide在父组件中返回要传给下级的数据;
  • inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
• 使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

二、用法解析

1 provide

在 祖辈组件的provide 中指定要传递给子孙组件的数据。

data() {
    return {     
        data:"给子孙的数据"   
    } 
},
provide() {   
    return {    
        data: this.data   
    } 
},

2 inject

子孙组件通过inject注入祖父组件传递过来的数据。

// inject用来指定一个数组或者一个对象，数组的话就放provide里字段的名称，而对象的话可以指定
data() {
  return {}
},
inject: ['data'],


inject: {
    data: {
      from: 'data',
      default: ""
    }
  }

但是此时data并不是响应式的数据.....

provide和inject绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

provide和inject数据响应式的解决方案

一、把值转为函数，记得要用箭头函数，不然不能正确获取this

data () {
    return {
        data: ""
    }
}
provide() {
  return {
    data: () => {
      return this.data;
    },
  };}

然后使用时就要变成了函数的调用

inject: ['data'],
computed: {
    data1() {
        return this.data()
    }
}

此时当祖辈组件的data改变时， 子组件中data1的值也会改变

二、把provide所在的Vue实例给传递下去

data () {
    return {
        data: ""
    }
}
provide() {
  return {
    ParentCom: this，
  };
  }

在子组件使用时：

inject: ['ParentCom'],
methods：{
    data_func () {
      console.log(ParentCom.data)
    }
}

之所以官方文档对此特性语焉不详，就是因为从他们的出发角度看不是特别推荐使用它，同时也怕开发者滥用。而从业务开发的角度来讲，绝大部分场景应该选用Vuex而不是provide/inject。 Vuex背后是原型链和响应式，并没有用到provide/inject。

小心内存泄漏!

这个问题是最近在实际开发中发现的，其实正中了官方所担心的使用不恰当的问题。
起因是provide里提供了一个方法，在子组件里调用这个方法，把子组件里的图表实例传递进去Hold住，以便将来调用。这样一来，图表的实例相当于一直存在于内存里而无法被回收掉，没过多久页面就卡顿的不行了。