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>