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

根据条件获取数据

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

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页面
数据接收



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
          })
        })
      },