Vue弹出窗口新的编辑页面
<template> <div> <!-- 卡片视图 --> <el-card> <el-row> <el-button type='primary' size='medium' icon='el-icon-plus' @click='addDialog'>添加</el-button> </el-row> </el-card> <add-or-update v-if='addOrUpdateVisible' @refreshFather='refreshList' ref='AddOrUpdateRef'></add-or-update> </div> </template> <script> import AddOrUpdate from './Edit' export default { data() { return {// 新增或编辑组件显示隐藏 addOrUpdateVisible: false } }, components: { AddOrUpdate }, methods: { // 新增 addDialog() { this.addOrUpdateVisible = true this.$nextTick(() => { this.$refs.AddOrUpdateRef.init() }) },// 刷新列表 用于监听子组件新增编辑后触发 refreshList(item) { this.addOrUpdateVisible = false } } } </script> <style lang='less' scoped> </style>
子页面：
<template> <div> <!-- 内容主体区域 --> <el-dialog title='新增/编辑' :close-on-click-modal='false' :visible.sync='showDialog' width='60%' @close='setDialogClosed'> <el-form ref='addFormRef' label-width='100px'> <el-row> <el-col style='text-align:center'> <el-button @click='showDialog = false'>返 回</el-button> </el-col> </el-row> </el-form> </el-dialog> </div> </template> <script> export default { data() { return {// 控制对话框显示隐藏 showDialog: false, } }, methods: { // 编辑初始化页面内容 async init() { this.showDialog = true }, // 关闭对话框触发 setDialogClosed() { // 子组件调用父组件方法，并传递参数 this.$emit('refreshFather') }, } } </script> <style lang='less' scoped></style>你可能想看：