父组件
// ref : 为了引用只组件 updateData: 为了接收子组件的值
<companyAdd :source="source" ref="companyAdd" @updateData="updateData" :isShowEditVisible="isShowEditVisible"></companyAdd>

import companyAdd from "@/views/components/Company/index";
  components: {companyAdd },
    handleUpdate(row) {
//companyAdd =>  ref="companyAdd"
//handleUpdate => 子组件的方法
      this.$refs.companyAdd.handleUpdate(row);
    },
    updateData(data) {
      if (data.resultCode == 200) {
        this.isShowEditVisible = false
        const index = this.tableList.findIndex(n=> n.id == data.data.id)
        if (index == -1) {
          this.tableList.unshift(data.data)
        } else {
          //this.tableList[index] = data.data
          this.$set(this.tableList,[index],data.data)
        }
      }
    },

子组件
<template>
  <el-dialog append-to-body :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="isShowEditVisible" title="新增客户" width="650px">
    <el-form ref="dataForm" :model="formdata.row" :rules="rules" label-width="65px">
      <el-col :span="24">
        <el-form-item label="名称" prop="title">
          <el-input v-model="formdata.row.title" />
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item v-model="formdata.row.invoice_type" label="发票类型" label-width="90px">
          <el-select v-model="formdata.row.invoice_type" placeholder="发票类型">
            <el-option v-for="(item, index) in formdata.option.invoice_type_list" :label="item" :value="index" :key="index" />
          </el-select>
        </el-form-item>
      </el-col>


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="_isShowEditVisible">取消</el-button>
      <el-button :loading="listLoading" size="small" type="primary" class="title1" @click="updateData">确定</el-button>
    </div>

  </el-dialog>
</template>

<script>
import { getList, ToDoAction } from "@/api/common";
export default {
  props: {
    isShowEditVisible: {
      type: Boolean,
      default: false
    },
    source: {
      type: String,
      default: 'list'
    }
  },
  data() {
    return {
      formdata: {
        row: {
          id: "",
          title: "",
          invoice_type: "",
        },
        option: {
          invoice_type_list: []
        },
      },

    }
  },
  methods: {
//这个方法为了子组件关闭弹窗
    _isShowEditVisible() {
      this.isShowEditVisible = false
      //this.$emit('update:isShowEditVisible', false)
    },

//这个方法是通过id , 请求接口获取数据
    handleUpdate(row) {
      console.log(1111, row)
      ToDoAction({ id: row.id, actiontype: 'company_add', action: 'add' }, {}).then(response => {
        if (response.resultCode == 200) {
          this.isShowEditVisible = true
          response.data.row.invoice_type = response.data.row.invoice_type.toString()
          this.formdata = Object.assign({}, response.data)
        } else {
          this.$message({
            message: response.data,
            type: 'error'
          })
        }
      })
    },

//这个方法是弹窗里面的确定按钮(提交数据)
    updateData() {
      const tempData = Object.assign({}, this.formdata);
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          ToDoAction(
            { id: tempData.id, actiontype: "company_add", action: "save" },
            tempData.row
          ).then((response) => {
            if (response.resultCode == 200) {
              this.isShowEditVisible = false
              this.$emit('update:isShowEditVisible', false) //修改isShowEditVisible的值 传给父组件
              //this.$parent.fetchData();
              this.$emit('updateData', response) //父组件有个updateData方法,将response传递到父组件的方法里面

            } else {
              this.$message({
                message: response.data,
                type: "error",
              });
            }
          });
        }
      });
    },
  }
}
</script>



声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

et_highlighter