vue页面间传输数据、接收数据方法以及注意事项

尖十利刃

已于 2022-05-17 11:40:31 修改

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：数据传输文章标签： vue.js javascript 前端

于 2022-05-17 11:40:14 首次发布

本文链接：https://blog.youkuaiyun.com/m0_66757598/article/details/124817839

数据传输专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Vue中页面间数据传输的注意事项，强调了数据为对象时需遍历获取内部值，赋值时字段属性名的一致性，以及正确获取表格数据路径的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据条件获取数据

页面间传输数据注意事项：

1、页面间传输的数据为对象，因此接收数据页面必须进行遍历获取内部值，否则无法使用

2、赋值必须确保字段属性名一致

3、获取表格数据的方法必须确保路径正确

/*定义方法*/
import request from '@/router/axios';
export const getPurPlanByMaterials = (id) => {
  return request({
    url: '/api/biz-instrument/instrumentpurchaseplan/instrumentpurchaseplan',
    method: 'get',
    params: {
      id
    }
  })
}

B页面
import {getPurPlanByMaterials} from "../../api/material/materialpurchaseplan";
if (this.originalType === 2) {
            /*判断this.originalId是否为空*/
          if (func.notEmpty(this.originalId)) {
            /*通过方法和条件获取数据*/
            getPurPlanByMaterials(this.originalId).then(res => {
              this.data = res.data.data;
              console.log(this.data)
              this.loading = false;
              this.selectionClear();
            });
          }
        }
/*获取当前选中数据*/
selectionChange(list) {
        this.materialsList = list;
      },
/*进行页面间数据传输*/
 handleSubmit() {
        this.$emit("selectedData", this.materialsList)
        this.box = false;
      },

C页面
数据接收

<material-origin v-show="isShowed" type="primary" :originalId="form.originalId"
                               :originalType="form.originalType"  @selectedData="getOriginalSelectedData"/>

getOriginalSelectedData(data) {
        this.addOriginalSelectedAll(data);
      },
/*注意：：：接收到的数据为对象，必须遍历，否则无法获取内部数值*/
/*注意：：：接收到的数据为对象，必须遍历，否则无法获取内部数值*/
addOriginalSelectedAll(list) {
        let originalTempList = list;
        originalTempList.map(item => {
          /*经过遍历将数据赋值给本页面数组*/
          /*prop: 'contractInstrumentList'*/
          this.form.contractInstrumentList.push({
            materialId: item.materialId,
            type: item.type,
            materialBillId: item.materialBillId,
            name: item.name,
            model: item.model,
            specs: item.specs,
            unitId: item.unitId,
            materialUnitPriceList: item.materialUnitPriceList,
            barCode: item.barCode,
            attrFormat: item.attrFormat,
            attrCompose: item.attrCompose
          })
        })
      },