vue组件多层级传值(爷爷组件和孙子组件直接传值)+provide + inject

有时一个页面，其实由许多组件构成，并且这些组件，层层嵌套，层次可能很深。这时问题就来了，假如有一些参数，从顶层组件就开始设置或提供，然后最底层的组件又需要，层层传递，不仅繁琐、容易出错，反而不利于代码的可维护和可读。

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

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

父组件：

export default {
  provide () {
    return {
      alertDt: () => this.dt, // 注意alertDt是一个方法
    }
  },
  data () {
    return {
      dt: new Date()
    }
  },
  methods: {
    toCreate (query) { // 修改要传递的值
      this.dt = query.dt
    }
  }
}

后代组件：

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()。当发觉返回值有变，即做出反应。就这样，当顶层组件，根据不同情况，调用不同的方法，因而导致参数值变化，底层组件就会相应变化。