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接收数据