点击按钮出现弹框，父子页面互相传参

父页面

点击按钮打开子页面弹框

<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>