Vue provide/inject使用

想象一个场景,子组件依赖父组件传递的props,如果有多个这样的props,其实已经很烦了,当有多个子组件,或者孙组件也依赖于由上至下的props时,写那么多props简直是要了亲命了。

为了解决这种麻烦,产生了vuex。但是我们肯定希望组件的高可复用性,不引入vuex就能实现功能,那就要考虑vue本身是否支持这种能力了。熟悉React开发的人应该会想到Context这个高阶组件,它通过ProviderConsumer,可以使得无限嵌套的父子组件共有一个数据源。Vue也有一个类似的,连名字都很相似,就是这篇文章的主人公provideinject

依赖注入 ,官网有个例子,讲述了为何我们需要 provide,它是可以终结复杂数据嵌套的神器。惯例先吹一波,不然写这篇文章的意义没了,=^^= 。闲话少说,上代码。

// parent组件
<template>
  <div>
    <div>{{test}}</div>
    <button @click="changeTest">修改test的值</button>
    <son></son>
  </div>
</template>

<script>
import Son from "./Son";
export default {
  name: "parent",
  components: { Son },
  provide() {
    return {
      injectData: this.test
    };
  },
  data() {
    return {
      test: "测试",
    };
  },
  methods: {
    changeTest() {
      this.test = "测试后";
    }
  }
};
</script>

//son组件
<template>
  <div>{{injectData}}</div>
</template>


<script>
export default {
  name: "son",
  inject: ["injectData"],
  mounted() {
    // eslint-disable-next-line
    console.log(this.injectData)
  },
};
</script>

parent组件使用provide提供一个injectDatason组件通过inject获取到parent注入的数据,以上就是它的最简用法。有一点需要注意,我们可以将inject得到的数据直接赋值给子组件的dataprops,但是这个是在vue版本2.1之后才有的功能,这版本之前,会在dataprops得到之后再得到注入的值。

使用provide/inject我们需要注意的是:

provide/inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
provide 选项应该是:一个对象或返回一个对象的函数
inject 选项应该是:一个字符串数组,或 一个对象,对象的 key 是本地的绑定名

如果我们parent组件里provide是如下代码:

provide: {
    injectData: this.test
}

我们会发现this.test所得到的永远是undefined

 provide: {
      injectData:() => {
        //eslint-disable-next-line
        console.log(this)
      }
  },

我们打印出来的this永远是undefined,所以我们最好切记使用return返回一个对象,直接赋值对象仅在我们需要传递的是静态数据时再使用。

最开始的例子测试中,我们会得到,provide传递的test数据并不是响应式的,当parent改变了test的值后,son组件无法得到改变后的值,这就产生了一个问题,我们肯定是希望父子组件拿到的数据是相同的。

image.png

我们先看看官网是如何说的,哦,并不直接是可响应的,而是要我们人为使它是可响应的,之前的测试是符合的,因为我们provide的只是一个字符串,可响应的我们很快想到对象数组这些。这样又产生一个问题,是provide传递的值就必须是个对象,还是说,传递的可以是个指针,指向的是个对象呢?实践出真知,测试一下。

provide() {
    return {
      injectData: this.test
    };
  },
  data() {
    return {
      test: {
        test: "测试"
      },
    };
  },

我们先将provide的改成上面的,结果是响应式的,我们再测试一下另外一种。

provide() {
    return {
      injectData: {
        test: this.test
      }
    };
  },
  data() {
    return {
      test: "测试"
    };
  },

测试得出结果,上面的不是响应式的。事实证明,必须是inject能拿到的数据对象响应式,我们才能得到响应式结果。

其实这样也蛮麻烦的,比如如果父组件有超多需要传递下去的数据,还有个超简洁的处理方式。

provide() {
  return {
      injectData: this
  }
}

我们可以将父组件整个传递到所需组件中去,并且组件实例本身就是响应式的,这样足以满足我们大部分组件需求。

使用时,我这边还是遇到了一种场景,不是provide的问题,但是与之有点关系。当我们将组件实例注入之后,子组件是能拿到组件的所有数据的,但是当父组件内里数据改变时,子组件是监听不到数据的变化的,页面也无法刷新,我是取了个巧,对数组进行 splice或者concat等其他会触发数组更新监听的操作,对象的话可以使用...Object.assign$set没什么用 ==!响应式更新机制,还是有很多不便的地方,刷新的解决方式还有待商榷,希望有更好的方法。

推荐阅读更多精彩内容