Vue组件使用

今天遇到一个bug，学到了一些东西，在这里整理一下。

首先展示功能

这是一个报账系统的页面，系统是嵌入在一个软件上面的所有的数据都是依靠缓存来获取的这是前提。

问题描述

首先这是一个识别的问题，我们使用ocr识别，识别发票的信息，将发票代码+发票号码结合在一起，形成发票编码便于我们查询，然后录入发票的总金额，税额，然后问题就来了，问题出现在税额这个字段在导入时发现没有小数点，经过多次试验是组件内部出现了问题，然后我们开始解决问题

问题解决

首先找到指定页面，然后寻找指定位置的代码使用Ctrl+F寻找ocr字段，发现使用不是直接使用的格式，而是使用组件的形式，

			<el-button
                type="primary"
                slot="trigger"
                size="small"
                @click="readImageData"
                v-if="true"
              >影像库</el-button>
              <ocr @func="getOcr"></ocr>

没错我是怎么找到这个组件的位置的呢，如果遇到复杂的页面可以通过寻找一个一个的指定元素旁边的元素的形式寻找指定的组件
然后继续搜索ocr字段

import ocr from './ocr';

通过找到import的方式寻找，找到制定的文件的位置

<template>
  <el-upload
    class="upload-demo upload_ocr"
    ref="upload"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :before-upload="beforeOCRUpload"
    :accept="'image/*'"
  >
    <el-button slot="trigger" size="small" type="primary">OCR</el-button>
  </el-upload>
</template>

然后这里就证明了这个组件的使用，其中还有一个问题
我们在@func="getOcr"然后通过逐步debug发现

<ocr @func="getOcr"></ocr>

getOcr (obj) {
      let flag = false;
      const invoice = {
        invoiceAmount: Number(obj.invoiceDetailsDTO.invoiceAmount),
        invoiceCode: obj.invoiceDetailsDTO.invoiceCodeNo,
        invoiceCodeNo: obj.invoiceDetailsDTO.invoiceCodeNo,
        invoiceNo: obj.invoiceDetailsDTO.invoiceNo,
        invoiceNoTaxAmount: Number(obj.invoiceDetailsDTO.invoiceNoTaxAmount),
        invoiceTaxAmount: Number(obj.invoiceDetailsDTO.invoiceTaxAmount),
        invoiceType: obj.invoiceDetailsDTO.invoiceType,
        invoiceTypeCode: obj.invoiceDetailsDTO.invoiceTypeCode,
      };

我就不找全了，然后发现传进来的参数出现了问题，于是我们才会在组件里面寻找原因的，我们在组建中寻找方法，我们通过变量名的方式逐步找到了正确的位置然后我们发现了代码出问题的原因

res.data.ocrResults.TotalTax = _this.positiveNumber(res.data.ocrResults.TotalTax); // 发票税额
_this.dataForm.invoiceDetailsDTO.invoiceTaxAmount = res.data.ocrResults.TotalTax;

positiveNumber(val){
      val = val.replace(
        /[^\.\d]/g,
        ""
      );
      val = val.replace(".", "");
      return val;
    }

我前段虽然学的不好但是我能看到出来他把小数点给replace了，所以才会出现小数点小时的情况，于是我们将方法注调，然后我主要说的是

 _this.$emit('func',_this.dataForm);

将指定的表单传到后台这才是我想说的，就这样实现了一个组件的使用并且是将组件处理的数据传到父组件的参数位置。