vue中使provide中的数据变为响应式

正常使用provide的方式:

父组件中:

provide:{

  for:'demo'

}

这样子组件中无论多深的子组件都可以使用:
inject:['for'],

data(){

  return{

    demo:this.for

  }

}

但是上面的写法有一定的问题,比如父组件中for变量的值如果我们是在mounted方法中请求后台数据再更改provide中for的值,那么在子组件中获取不到更改后的for的值。

这时候就需要换一种写法:

父组件中:

  provide() {     return {       provObj: {         for: '',       },     };   },  mounted() {     setTimeout(()=>{       this._provided.provObj.for= 'demo';     },2000); } 子组件中:

inject:['provObj'],

data(){

  return{

    demo:this.provObj.for

  }

}

这样就可以获取到在mounted中才给provide赋上的值。

上一篇:【Vue】---生命周期


下一篇:VUE引入第三方js包及调用方法讲解