vue新增编辑共用一个弹窗,vue一个页面引用另一个页面
这篇文章主要介绍了某视频剪辑软件实现弹窗引用另一个页面窗口，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
弹窗引用另一个页面窗口弹窗如何嵌入其它页面A页面（父页面)B页面（子页面)
弹窗引用另一个页面窗口
需求：在一个主页面阿武上点击按钮时弹出一个窗口，该窗口的定义在B.vue，比如修改，需要从阿武传参到B.vue，修改完成后，刷新阿武实现
页面定义，有2个文件，在索引。某视频剪辑软件上有个【修改】按钮，点击弹出testDialog.vue定义的窗口，如下
testDialog.vue
模板
！-添加或修改业务对话框-
El-dialog:title= title :可见。sync= open width= 500 px :close-on-click-modal= false append-to-body
El-form ref= biz form :model= biz form label-width= 80px
El-表单-项目标签=业务名称prop=bizName
El-input v-model= biz form。业务名称 placeholder=请输入业务名称/
/El-表单-项目
El-表单-项目标签=业务编码prop=bizCode
El-input v-model= biz form。业务代码 placeholder=请输入编码名称/
/El-表单-项目
/el格式
div slot=footer class=对话框-页脚
El-button type= primary @ click=提交表单确定/el-button
el-button @click=取消取消/el-button
/div
/el-dialog
/模板
脚本
从" @/API/资金/路线中心/业务定义"导入{getById，addBizDefine，updateBizDefine }。
导出默认值{
名称："测试对话框",
data() {
返回{
//弹出层标题
标题： ,
//是否显示弹出层
开：假，
//表单参数
bizform: {}
};
},
方法：{
//窗口初始化方法，下一个刻度方法可以添加逻辑，如打开窗口时查询数据填充
init(bizId) {
this.open=true
这个. nextTick(()={
getById(bizId).然后(响应={
这个。商业形式=响应。数据；
this.open=true
this.title=修改业务；
});
});
},
//取消按钮
取消(){
this.open=false
这个。reset()；
},
/** 提交按钮*/
submitForm: function () {
这个refs[bizform].验证（有效={
如果（有效){
if (this.bizform.id！=未定义){
updateBizDefine(this.bizform).然后(响应={
if (response.data) {
this.msgSuccess(修改成功);
this.open=false
//调用主页面的下载新闻组清单方法刷新主页面
这个$家长。getlist()；
}否则{
这个。消息错误(响应。结果消息)；
}
});
}否则{
addBizDefine(this.bizform).然后(响应={
if (response.data) {
this.msgSuccess(新增成功);
this.open=false
//调用主页面的下载新闻组清单方法刷新主页面
这个$家长。getlist()；
}否则{
这个。消息错误(响应。结果消息)；
}
});
}
}
});
}
}
};
/脚本
索引。某视频剪辑软件中定义一个按钮，其它代码省略
模板
！-打开测试窗口按钮-
埃尔按钮
type=primary
icon=el-icon-plus
size=mini
@click=handleDialog
测试弹窗
/el-button
！-使用组件-
testDialog title=测试窗口v-if=打开对话框 ref=测试对话框/
/模板
脚本
//引用组件
从""导入测试对话框./测试对话框；
从" @/API/资金/路线中心/业务定义"导入{ query biz define }；
导出默认值{
//注册组件
组件：{测试对话框}，
data() {
返回{
//显示窗口
openDialog: false
};
},
方法：{
/* *查询业务列表*/
getList() {
this.loading=true
queryBizDefine(this . query params)。然后(response={
this . biz list=response . data . rows；
this . total=response . data . total；
this.loading=false
});
},
//按钮方法
handleDialog() {
this.openDialog=true
这个。$nextTick(()={
这个。$ refs . test dialog . init(2)；
});
}
}
};
/脚本
测试结果，上图是传入id为2的，可以在另一个页面找到并显示。
修改后可以刷新主页。
弹窗如何嵌入其它页面
直接编码。
代码使用了元素ui。
A页面（父页面）
将B页面当作组件引入。
从导入任务日志列表./dialogPage/index.vue
导出默认值{
组件：{
对话框
},
.
}
将组件引入放到HTML代码中
对话框
v-if=formPageVisible
ref=formPageRef
:queryId=logDialog.queryId
/dialogPage
代码描述
QueryId:用户定义的值传递参数。目的是将值从父页面传递到子页面。FormPageVisible:显示参数。在调用当前弹窗的方法里面进行如下设置
方法：{
.
/**
*弹出方法
*/
showLog(obj){
//显示
this.formPageVisible=true
//赋值
this . queryid=obj . queryid；
//调用子页方法
这个。$nextTick(()={
这个。$ refs . formpageref . getlist()；
})
}
}
基本上A页已经可以退休了。
下面的B页开始播放。
B页面（子页面）
b页面的主要工作是两个。
1.获取页面a的值。
2.方法的实现。
1、获取A页面的传值
传递值，单位为Vue。一般设定都是在道具里做的。
导出默认值{
道具：{
queryId:{
类型：字符串，
默认值： ，
},
},
.
在这里，queryId是前面传递的参数。
2、方法的实现
遗漏.
对了，记得把B页设置成对话框。否则可能无法实现弹窗的效果。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。