vue顶层组件通过provide + inject + computed + watch 动态传值

Posted 2021-09-04 左直拳

如果想从孙子辈组件直接获取到顶层组件的传值，而且是动态刷新的，需要通过provide + inject + computed + watch。

组件是vue开发框架的主角。日常开发过程中，为了利于复用、解耦，提升可读性和可维护性，不知不觉开发了一大堆组件。有时一张页面，其实由许多组件构成，并且这些组件，层层嵌套，层次可能很深。这时问题就来了，假如有一些参数，从顶层组件就开始设置或提供，然后最底层的组件又需要，层层传递，不仅繁琐、容易出错，反而不利于代码的可维护和可读。

有没有一种方法，可以直接由顶层组件传播到最底层呢？或者说，可以让最底层能直接接收到顶层的参数呢？

有的，provide + inject 。顶层组件provide，底层组件inject。但是，这只能保证一次成功，以后参数改变了，底层并不能感知。这时又要加上computed和watch，并且参数是函数类型，各种方法一齐上，才能奏效。

父组件：

export default {
  provide () {
    return {
      alertDt: () => this.dt, // 注意alertDt是一个方法
    }
  },
  data () {
    return {
      dt: new Date()
    }
  },
  methods: {
    toCreate (query) { // 不同情况下，dt被赋上不同的值
      this.dt = query.dt
    },
    showDetail (id) {
      this.dt = new Date()
    }
  }
}

后代组件：

export default {
  inject: ['alertDt'],
  data () {
    return {
      form1: {
        dtRange: this.alertDt()//alertDt是一个方法。。。
      }
    }
  },
  computed: {
    getAlertDt () {
      return this.alertDt()
    }
  },
  watch: {
    getAlertDt: function (val) { // 注意这里不能使用lampda表达式，否则this无效!!!!!!
      this.form1.dtRange = val
    }
  }
}

watch的作用，在这里是用于监视getAlertDt()，也即监视provide里的这个alertDt()。当发觉返回值有变，即做出反应。就这样，当顶层组件，根据不同情况，调用不同的方法，因而导致参数值变化，底层组件就会相应变化。