vue__0">vue 不在同一处(不是同一个页面)的数据使用(数据传输)
整理下最近在做vue项目时遇到的几个关于数据传输的问题:
有的时候我们在同一个页面想要调用不同的组件,不同的组件可能只是结构不太一样,但是请求的是同一个接口,使用的数据也是一样的
在公共的文件中你请求了接口,所有数据都在这一个文件中获取了,那么在调用不同组件的时候怎么使用呢?
代码:
//公共的地方请求数据
getScoreData() {
this.$api.get('/okr/score', {period: this.period, plan_id: this.plan_id}, ({errcode, data}) => {
if (errcode === 0) {
this.okr_data = data.data;
this.okr_weight = data.weight;
this.appraisal_data = data.detail;
this.appraisal_weight = data.appraisal_weight;
this.assess_data = data.assess_data;
this.assess_data.forEach(self => {
if (self.title == '自评总结') {
this.self_text = self.text
}
return this.leader_text = self.text
})
this.okr_score = data.score;
this.appraisal_score = data.appraisal_score;
if (this.okr_score == 0 && this.appraisal_score == 0) {
this.sumScore = '-'
} else {
this.sumScore = this.okr_score + this.appraisal_score;
}
this.config = {...data.config}
this.if_can_edit = data.can_edit;
this.$emit('getState', this.if_can_edit)
this.$emit('getSumScore', this.sumScore)
}
})
},
//在provide 中定义一个指代所有已经获取到的数据
provide() {
return {
score_parent:this
}
},
//在调用的不同组件中使用inject来接收数据
inject:[
'score_parent'
],
//使用的时候
score_parent.okr_weight
//或者
this.score_parent
这个方法有点类似于props接收数据,但是props针对于数据少的情况是比较好的,
provide,inject针对于所传输的数据量大的时候。
仅仅是一次记录,欢迎提意见!