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

Question

父组件
<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>

Answer 1

你在父组件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)
    }

}