点击按钮出现弹框,父子页面互相传参
2024-01-03 19:31:42
父页面
点击按钮打开子页面弹框
<template>
<div>
<page-main>
<el-row>
<el-button size="small" @click="mainclick('111')">加入主服</el-button>
</el-row>
<!-- 加入主服弹框 -->
<Jointhemainservice ref="Jointhemainserviceref" @success="getList"></Jointhemainservice>
</page-main>
</div>
</template>
<script setup lang="ts" name="manualoverserving">
const Jointhemainserviceref = ref() //加入主服弹框实例
const Jointhemainservedata = reactive({
projectId: manualoverdata.projectId, //项目
tenantId: manualoverdata.tenantId,//平台id
crossservicetype: crossservicetype.value , //跨服类型数据
})
//自动组点击加入主服
const mainclick = (row: any) => {
Jointhemainserviceref.value.open(Jointhemainservedata,row) //使用子页面导出的open方法
并传达参数
}
//自定义方法 拿取子页面返回的数据
const getlist = ()=>{
}
</script>
<style lang="scss" scoped>
</style>
子页面
<template>
<div>
<!-- 弹框加入主服 -->
<el-dialog v-model="dialogVisible" title="选择跨服类型" width="30%">
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirm">
确定
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const dialogVisible = ref(false) //加入从服弹框展示
const propsdata = ref()
const servecode = ref('')
// 打开弹窗 *
const open = (data: any, row: any) => {
console.log(data, row); //打印传递的参数
dialogVisible.value = true //打开弹窗
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
//弹框确定
const confirm = () => {
// 发送操作成功的事件
emit('success')
}
</script>
<style lang="scss" scoped></style>
文章来源:https://blog.csdn.net/m0_68716504/article/details/135370155
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!