provide与inject的使用

451 阅读1分钟

在vue项目中我们可能需要在孙子组件接收参数并同步改变到爷爷组件,但我们又不想用vuex存储,那么我们就可以通过provide提供需要传递的参数,通过inject注入到某一个孙子组件中使用。
如下图实例:
看爷爷级的代码:

provide () { // 定义参数传给子级或者孙子级组件
  return {
    toGdata: this.toGdata
  }
},

子级或者孙子级接收参数,参数是数组或者对象类型才支持同步修改参数,否则修改之后不回同步到爷爷级组件:

inject: ['toGdata'], // 接收爷爷级的参数
data () {
  return {
    fromParentData: this.toGdata,
  }
}

注意:

1,这里不论子组件嵌套有多深, 只要调用了 inject 那么就可以注入 provide 中的数据,而不局限于只能从当前父组件的props属性中回去数据。
2,传递参数为值类型(基本类型),接受参数的组件中不能进修改,传递对象或者数组,可以直接进行修改,并且可以影响祖先级组件。

结论:在简单的功能模块,可以通过传递对象实现跨级组件通信,复杂的功能模块不建议使用,因为传递的数据,如果其他的儿子级组件,其他儿子级组件的孙子级组件也在使用的话,会造成数据的混乱,甚至无法理解数据是在哪里变化的,排查故障艰难。跨级组件通信可以定义一个中央事件总线(eventBus),但是更复杂的系统,还是建议使用vuex。