vue组件之祖孙传后代provide和inject

首先祖先给子孙后代传递也是可以用props传递,一层层传递,爷爷给孙子还好,但是嵌了五六层还这么写,就显得非常麻烦了。
所以就用到了provide(提供)和inject(注入)。这两个是配套使用的,以允许祖先向所有祖先后代注入一个依赖。

  • provide: 是一个对象或者是一个返回对象的函数。里面就是所有要给后代的东西,也就是一对对属性和值
  • inject: 一个字符串数组或者是一个对象,属性值也可以是一个对象,包含了from和default默认值。
    用法就是在父组件里面通过provide注入想要注入的数据,再在后代组件中通过inject注入这些数据,然后直接使用。

1、父亲传儿子的简单案例如下:

//father.vue文件
vue组件之祖孙传后代provide和inject

//son.vue文件
vue组件之祖孙传后代provide和inject
2、上面是父亲传儿子,下面是父子传孙子,而且provide的数据是从data对象里面取得。父亲传孙子的时候中间文件son如果不用provide提供的数据的话就不用inject注入数据。同时自己有试着直接将父亲文件里面的provide里面的数据拿着去父亲模板里面用,但是是不能直接用的。

//Father文件
vue组件之祖孙传后代provide和inject
//son文件
vue组件之祖孙传后代provide和inject
//grandson文件
vue组件之祖孙传后代provide和inject