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

Posted 左直拳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue顶层组件通过provide + inject + computed + watch 动态传值相关的知识,希望对你有一定的参考价值。

如果想从孙子辈组件直接获取到顶层组件的传值,而且是动态刷新的,需要通过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()。当发觉返回值有变,即做出反应。就这样,当顶层组件,根据不同情况,调用不同的方法,因而导致参数值变化,底层组件就会相应变化。

以上是关于vue顶层组件通过provide + inject + computed + watch 动态传值的主要内容,如果未能解决你的问题,请参考以下文章

vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据

Button按钮--inject与provide

vue组件通讯之provide / inject

vue 父组件如何给子组件的组件传值 provide inject

vue 初步了解provide/inject

vue provide和inject使用