list.vue打开dialog.vue后，再关闭dialog.vue后的list.vue的数据刷新问题

Question

#list.vue中打开独立的dialog.vue（新增与编辑按钮打开的WarArtEditVue），在dialog.vue中添加数据，隐藏dialog.vue后实时刷新数据该怎么做？
#list.vue代码

<template>
    <div id="mainSkList">
        <el-form :inline="true" :model="warArtQuery" ref="warArtQuery" class="demo-form-inline"
            style="line-height: 40px;font-size: 8px; text-align: right;" required>
            <el-form-item label="名称：" prop="likeName">
                <el-input v-model="warArtQuery.likeName" placeholder="名称："></el-input>
            </el-form-item>
            <el-form-item label="类型：" prop="wtype">
                <el-input v-model="warArtQuery.wtype" placeholder="类型"></el-input>
            </el-form-item>
            <el-form-item label="兵书：" prop="wart ">
                <el-input v-model="warArtQuery.wart" placeholder="兵书"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery">查询</el-button>
                <el-button type="warning" @click="resetForm('warArtQuery')">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row style="display: flex;justify-content: flex-start;">
            <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
            <el-button type="primary" plain @click="insertWarArt">新增</el-button>

            <!--新增的对话框--> 
            <WarArtEditVue ref="WarArtEditVue"></WarArtEditVue>
            <el-form id="fenYe" style="position: absolute;right: 0;">
                <!-- 分页-->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </el-form>
        </el-row>
        <el-table :data="tableData" style="width: 100%；font-size：10px" :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="40" style="text-align: center;"></el-table-column>
            <el-table-column type="index" width="54" :index="getIndex" center></el-table-column>
            <!-- <el-table-column prop="wid" label="序号" width="50" align="center"></el-table-column> -->
            <el-table-column prop="wname" label="名称" width="150" align="center"></el-table-column>
            <el-table-column prop="wtype" label="类型" width="160" align="center"></el-table-column>
            <el-table-column label="兵书" width="150" align="center">
                <template slot-scope="scope">
                    <el-link :style="getArtNameStyle(scope.row.wtype)" @click="viewWarArt(scope.row.wart)">{{ scope.row.wart }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="wclassics" label="典籍" width="300" align="center"></el-table-column>
            <el-table-column prop="weffect" label="效果" width="400" align="center"></el-table-column>
            <el-table-column label="操作" align="center" >
                <template slot-scope="scope">
                    <el-button type="primary" plain @click="warArtEdit(scope.row)" style="padding:10px;size: mini;">编辑</el-button>
                    <el-button type="danger" plain @click="deleteById(scope.row)" style="padding:10px;size: mini;">删除</el-button>
                </template>
            </el-table-column>
        </el-table> 
    </div>
</template>
<script>
const reqWarArt = require("@/api/requests/reqWarArt")
import { MessageBox } from 'element-ui';
import WarArtEditVue from '@/components/dialogs/warart/WarArtEdit.vue'
export default {
    components: {
        WarArtEditVue
    },
    data() {
        return {
            warArtQuery: {},
            tableData: [],

            // 分页
            currPage: 1,
            pageSize: 10,
            totalCount: 0,

            // 批量
            multipleSelection: [],
        }
    },
    mounted() {
        this.onQuery();
    },
    methods: {
        getTalentNameStyle(tRate){
            console.log(tRate);
           return getTalentStyle(tRate);
        },
        getSkillNameStyle(level){
           return getSkillStyle(level);
        },
        onQuery() { 
            reqWarArt.warArtPage(this.currPage,this.pageSize,this.warArtQuery).then((resp) => {
                if (resp.code == 1) {
                    this.tableData = resp.data.rows;
                    this.totalCount = resp.data.total;
                }else{
                    this.$message.warning("抱歉，没有获取到数据!")
                }
            })
        },
        resetForm(form) {
            this.$refs[form].resetFields();
            this.onQuery();
        },
        insertWarArt(){
            this.$nextTick(() => {
                this.$refs.WarArtEditVue.init(-1, "新增...", "insert",()=>this.onQuery);
            });
        },
        deleteById(row){
            var ids = [row.wid];
            var names = [row.wname];
            this.deleteWarArt(ids, names);
        },
        deleteByIds(){
            // 从this.multipleSelection中获取选中
            // 检查是否有勾选
            if (this.multipleSelection.length == 0) {
                this.$message.warning("请先勾选删除项！");
                return;
            }
            var ids = [];
            var names = [];
            for (let i = 0; i < this.multipleSelection.length; i++) {
                ids[i] = this.multipleSelection[i].wid;
                names[i] = this.multipleSelection[i].wname;
            }
            this.deleteWarArt(ids, names)
        },
        deleteWarArt(ids,names){
            MessageBox.confirm("确定要删除数据[" + names + "]吗？", '删除提示', {
                iconClass: 'el-icon-delete',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showClose: true,
                type: 'warning'
            }).then(() => {
                reqWarArt.deleteWarArt(ids).then(resp => {
                    if (resp.code == 1) {
                        this.$message.success("删除成功");
                        this.onQuery();
                    } else {
                        this.$message.error("删除失败");
                    }
                })
            }).catch(() => {
                // 取消操作
            });
        },
        warArtEdit(row){
            this.$nextTick(() => {
                this.$refs.WarArtEditVue.init(row.wid, "编辑...", "update");
            });
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.onQuery();
        },
        handleCurrentChange(val) {
            this.currPage = val;
            this.onQuery();
        },
        tableRowClassName({ rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'warning-row';
            }
            return '';
        },
        // 复选框选中后执行的方法
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val);
        },
        // 获取序号
        getIndex(index) {
            // 根据当前页数和每页显示的数量计算序号
            return (this.currPage - 1) * this.pageSize + index + 1;
        },
        getArtNameStyle(){

        }
    },
}
</script>
<style></style>

#dialog.vue代码

<template>
    <el-dialog :title="title" :visible.sync="show" width="36%">
        <el-form ref="warArt" :model="warArt" label-width="80px" :rules="formRules" required>
            <el-form-item label="姓名：" :span="6" prop="wname">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-input v-model="warArt.wname" placeholder="姓名" clearable>
                            <el-button slot="query" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="类型：" :span="6" prop="wtype">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-select v-model="warArt.wtype" placeholder="类型：">
                            <el-option v-for="item in warArtTypeOptions" :key="item.id" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="上级：" :span="6" prop="wart">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-input v-model="warArt.wart" placeholder="上级" value="warArt.wart" clearable> </el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="典籍：" :span="6" prop="wclassics">
                <el-row :gutter="10">
                    <el-col :span="23">
                        <el-input v-model="warArt.wclassics" placeholder="典籍" value="warArt.wclassics" clearable>
                        </el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="效果：" prop="weffect">
                <el-col :span="23">
                    <el-input type="textarea" v-model="warArt.weffect" placeholder="说明" rows="4"
                        style="font-family: Arial;font-size: 12px;" show-word-limit></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="点评：" prop="wnote">
                <el-col :span="23">
                    <el-input type="textarea" v-model="warArt.wnote" placeholder="点评" maxlength="1024" rows="6"
                        style="font-family: Arial;font-size: 12px;" show-word-limit></el-input>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(0)" v-if="isInsert">添加</el-button>
                <el-button type="primary" @click="submitForm(1)" v-if="isUpdate">更新</el-button>
                <el-button @click="resetForm" v-if="isInsert">重置</el-button>
                <el-button type="info" @click="doCancel">取 消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
const reqWarArt = require("@/api/requests/reqWarArt")
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState(['warArtTypeOptions'])
    },
    data() {
        // 校验 value对应元素的值
        var validatePass = (rule, value, callback) => {
            if (value != null && value != "") {
                reqWarArt.selectWarArtByName(value).then(resp => {
                    // resp.data是一个array
                    if (resp.code == 1 && resp.data != null && resp.data.length > 0) {
                        this.warArt.wname = '';
                        callback(new Error('当前名称已经存在'));
                    }
                    else {
                        callback();
                    }
                })
            } else {
                callback();
            }
        };
        return {
            show: false,
            title: '新增...',
            type: 'add',
            wId: 0,
            isInsert: false,
            isUpdate: false,
            warArt: {},

            formRules: {
                // validator是单个表单域格式验证的验证器，
                // 一般是需要比较复杂的格式验证的时候才会用。如果是非空验证、数据类型验证或者正则表达式能处理的，
                // 都可以直接通过rules的type/Pattern等相关参数直接配置就好了。
                wname: [
                    { required: true, message: '名称不能为空', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        // 初始化
        init(wId, title, type) {//获取传过来的数据（不用调用此方法）
            this.show = true;
            this.title = title;
            this.type = type;
            this.warArt = {};
            if (wId > 0) {
                this.wId = wId;
                this.queryWarArt();
            }
            if (this.type == "insert") {
                this.title = "新增...";
                this.isInsert = true;
                this.isUpdate = false;
            } else if (this.type == "update") {
                this.title = "修改...";
                this.isInsert = false;
                this.isUpdate = true;
            }
        },
        queryWarArt() {
            reqWarArt.selectWarArtById(this.wId).then(resp => {
                if (resp.code == 1) {
                    this.warArt = resp.data;

                } else {
                    this.$message.warning("获取数据失败" + this.wId)
                }
            })
        },
        submitForm(flag) {
            this.$refs.warArt.validate(valid => {
                if (valid) {
                    if (flag == 0) {
                        reqWarArt.insertWarArt(this.warArt).then(resp => {
                            if (resp.code == 1) {
                                this.$message.success("恭喜你，添加成功")
                                this.doCancel();
                            } else {
                                this.$message.error("添加失败");
                            }
                        })
                    } else if (flag == 1) {
                        reqWarArt.updateWarArt(this.warArt).then(resp => {
                            if (resp.code == 1) {
                                this.$message.success("恭喜你，修改成功")
                                this.doCancel();
                            } else {
                                this.$message.error("修改失败");
                            }
                        })
                    }
                } else {
                    this.$message.error("表单数据校验失败！")
                }
            });
        },
        resetForm() {
            this.$refs.warArt.resetFields();
        },
        doCancel() {
            this.$refs.warArt.resetFields();
            this.show = false;
        }
    },
}
</script>
<style></style>

Answer 1

在父模块中，调用的代码中添加@update-data="handleUpdateData"，以及在script中实现handleUpdateData，

<SkillEdit ref="SkillEdit" @update-data="handleUpdateData"></SkillEdit>

在子模块中，完成操作后的退出函数代码中添加：this.$emit('update-data');

             // 提交(添加或更新)
        onSubmit(flag) {
            this.skill.arms = this.arms.toString();
            console.log("this.skill.slevel = "+this.skill.slevel)
            if (flag == 0) {
                reqSkill.insertNewSkill(this.skill).then(resp => {
                    if (resp.code == 1) {
                        this.$message.success("恭喜你，添加成功")
                        this.$emit('update-data');
                        this.doCancel();
                    } else {
                        this.$message.error("添加失败");
                    }
                })
            } else if (flag == 1) {
                reqSkill.updateSkill(this.skill).then(resp => {
                    if (resp.code == 1) {
                        this.$message.success("恭喜你，修改成功")
                        this.$emit('update-data');
                        this.doCancel();
                    } else {
                        this.$message.error("修改失败");
                    }
                })
            }
        },