父页面：
<template> <div class="table"> <el-button type="primary" icon="search" @click="openDialogsTable">编辑</el-button> <dialog-table :showModal="dialogTableShow" @close="dialogTableClose"></dialog-table> </div> </template> <script> import DialogTable from '../common/DialogTable' export default { name: 'basetable', components:{DialogTable}, data() { return { dialogTableShow:false } }, methods: { //================== zxb ============================= //打开编辑弹窗 openDialogsTable(){ this.dialogTableShow = true; }, //关闭编辑弹窗 dialogTableClose(showModal){ this.dialogTableShow = showModal; } } } </script>子页面
<template> <!--:visible.sync="editVisibles"--> <!-- 编辑弹出框 --> <el-dialog :visible.sync="currentValue" title="编辑" width="30%"> <el-form ref="form" :model="form" label-width="50px"> <el-form-item label="日期"> <el-date-picker type="date" placeholder="选择日期" v-model="form.date" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker> </el-form-item> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="地址"> <el-input v-model="form.address"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="cancelDialog">取 消</el-button> <el-button type="primary" @click="confirmDialog">确 定</el-button> </span> </el-dialog> </template> <script> export default { name: "DialogTable", props:{ showModal:{ default:false } }, data() { return{ currentValue:false, editVisibles:false, form: { name: '', date: '', address: '' } } }, watch:{ showModal:function(newValue){ this.currentValue = newValue; }, currentValue:function(newValue){//监听currentValue值的改变，若改变则触发 if(!newValue){ this.$emit('close', newValue); } } }, methods:{ cancelDialog(){ this.currentValue = false; // this.$emit("zlylm",this.formTwo); }, confirmDialog(){ this.currentValue = false; // this.$emit("zlylm",this.formTwo); } } } </script>
