本文主要是介绍vue 不在同一处（不是同一个页面）的数据使用（数据传输），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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针对于所传输的数据量大的时候。
仅仅是一次记录，欢迎提意见！
这篇关于vue 不在同一处（不是同一个页面）的数据使用（数据传输）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
