子传父，添加功能如何实现？

父组件
<template>
  <div style="height: 100%">
    <el-card style="height: 100%">
      <div slot="header" class="clearfix">
        <span>卡片名称span>
        <el-button type="primary" @click="add">添加用户el-button>
      div>
      <div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          el-table-column>
          <el-table-column prop="address" label="地址"> el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="editRow(scope.$index, scope.row)">
                编辑
              el-button>
              <el-button
                size="mini"
                @click="deleteRow(scope.$index, tableData)"
              >
                删除
              el-button>
            template>
          el-table-column>
        el-table>
      div>
    el-card>
    <add :visible.sync="addVisible">add>
    <update :visible.sync="updateVisible">update>
  div>
template>

<script>
import add from "./add.vue";
import update from "./update.vue";
export default {
  data() {
    return {
      addVisible: false,
      updateVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      form: {
        date: "",
        name: "",
        address: "",
      },
    };
  },
  components: {
    add,
    update,
  },
  methods: {
    add() {
      this.addVisible = true;
    },
    editRow(index, row) {
      this.updateVisible = true;
      console.log(index, row);
      this.form = row;
    },
    deleteRow(index, rows) {
      this.$confirm("确定删除该行数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          rows.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            message: "已取消删除",
            type: "info",
          });
        });
    },
  },
};
script>

<style>
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
style>

子组件
<template>
  <el-dialog
    title="添加用户"
    :visible.sync="adddialogVisible"
    width="30%"
    @close="clearData"
  >
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="日期" prop="date">
        <el-input v-model="form.date" autocomplete="off">el-input>
      el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" autocomplete="off">el-input>
      el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" autocomplete="off">el-input>
      el-form-item>
    el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="adddialogVisible = false">取 消el-button>
      <el-button type="primary" @click="submit">添 加el-button>
    div>
  el-dialog>
template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      form: {
        date: "",
        name: "",
        address: "",
      },
      rules: {
        date: [{ required: true, message: "请输入日期", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    adddialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("refresh", this.form);
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.adddialogVisible = false;
          this.clearData();
        } else {
          return false;
        }
      });
    },
    clearData() {
      this.$refs.form.resetFields();
    },
  },
};
script>

<style>
style>

你在父组件add，update组件上定义@refresh=”refresh“属性，去监听子组件refresh事件

<add :visible.sync="addVisible" @refresh="refresh"></add>
<update :visible.sync="updateVisible" @refresh="refresh"></update>

在父组件，定义方法refresh去接子组件传来的表单

refresh(formData){
    //编辑与添加根据formData是否有主键id来区别
    if (formData.id) {
        //编辑，更新列表数据
        for (let data of this.tableData) {
            if (data.id === formData.id) {
                data.name = formData.name
                data.date = formData.date
                data.address = formData.address
            }
        }
    } else {
        // 添加
        this.tableData.push(formData)
    }

}

#父组件中的以add组件为例，在add组件中传值给父组件

# 在add组件上定义个事件myChange用于接收add子组件向父组件传值
<add @myChange=myChange><add>

# 父组件方法
methods: {
    # val:子组件add中传过来的值
    myChange(val){

    }
}

# 子组件add中，只需要调用myFun方法即可向父组件传值
methods: {
    myFun(){
        this.$emit("myChange", "向父组件传值");
    }
}

https://blog.csdn.net/weixin_47074432/article/details/108665492