vue 不在同一处(不是同一个页面)的数据使用(数据传输)

news/2024/7/10 0:52:04 标签: vue, vue.js

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针对于所传输的数据量大的时候。

仅仅是一次记录,欢迎提意见!


http://www.niftyadmin.cn/n/1867638.html

相关文章

SpringCloud--zuul和oauth2

文章目录zuuloauth2资源配置授权服务web策略用户UserDetails服务配置文件此篇我将介绍 将zuul 层 和 oauth2 进行分别作为两个服务处理。 zuul 进行路由分发和进行关联oauth2服务 Pom需要的依赖 <dependency><groupId>org.springframework.cloud</groupId>&l…

vue + element(前后端) 学习总结(一)

准备工作 工具安装和环境搭建 ## node.js## npm## mongodb数据库 主要记录一下mongodb的安装和配置(mac版) ## 首先去mongodb的官网下载&#xff1a;[https://www.mongodb.com/download-center] ## 下载解压后重命名为mongodb,接着打开mongodb&#xff0c;在mongodb下新建一个…

Kubernetes--阿里云服务安装

由于官网给的地址为google地址&#xff0c;被墙。因此采用阿里的镜像执行安装。安装方式传送门 传送门 Kubernetes 阿里云服务器安装方式 https://yq.aliyun.com/articles/626118

vue + element(前后端) 学习总结 (二)

初始化项目 admin&#xff08;管理端&#xff09; server &#xff08;服务端&#xff09; web &#xff08;移动端&#xff09; 在项目文件下&#xff08;demo_project&#xff09;新建各端项目文件 在demo_project文件路径下&#xff0c;输入命令&#xff1a;mkdir serv…

vue + element(前后端) 学习总结 (三)

后台管理界面的搭建 cd admin 进入后台管理项目路径下 npm run serve 启动项目 vue add element 安装element-ui vue add router 安装路由 去element 官网 找到后台管理界面 复制代码 在admin > src > views > 新建Main.vue文件 粘贴element代码 在router.js 里…

Mac--jenv管理jdk版本

文章目录mac进行安装基本操作方式mac进行安装 进行安装 brew install jenv -y配置环境变量 echo export PATH"$HOME/.jenv/bin:$PATH" >> ~/.bash_profile echo eval "$(jenv init -)" >> ~/.bash_profile基本操作方式 查看当前以增加的jd…

Vue 知识点:Object.defineProperty

Vue 知识点&#xff1a;Object.defineProperty 数据描述符 Object.defineProperty()的作用就是直接在一个对象上定义一个新属性&#xff0c;或者修改一个已经存在的属性 存取描述符 --是由一对 getter、setter 函数功能来描述的属性 get&#xff1a;一个给属性提供getter的方法…

FFMPEG--windows安装

文章目录FFMPEG下载安装资料FFMPEG FFMPEG作为强大的视频工具。可以很方便的进行处理视频相关的转码操作。 下载 前往FFmpeg进行下载windows所需要的依赖内容 根据你所需要的Linking和设备进行选择 说明 模式名模式说明static该版本提供了静态版本的FFmpeg工具&#xff0…