Vue3 子组件传给父组件（方法） 弹窗案列

组件传给父组件（方法） 弹窗案列"/>

Vue3 子组件传给父组件（方法） 弹窗案列

父组件

弹窗绑定 ref="menuDialogRef"

html内容

<JsonForm ref="menuDialogRef" />

 js中代码编写

const JsonForm = defineAsyncComponent(()=>import('/@/views/main/drive/dialog.vue'))const menuDialogRef = ref(); //修改组件弹窗//父组件点击事件
const onOpenEditRole = () => {//接收子组件的弹窗openDialog()为子组件方法menuDialogRef.value.openDialog()};

子组件

 主要暴露方法openDialog （）弹窗逻辑

暴露变量：

defineExpose({

  openDialog,

});

<template><div class="system-role-dialog-container"><el-dialog :title="title" v-model="isShowDialog" width="30%" draggable><div>123</div><template #footer><span class="dialog-footer"><el-button size="default">取 消</el-button><el-button type="primary" size="default">确定</el-button></span></template></el-dialog></div>
</template><script setup lang="ts" name="systemRoleDialog">
import { reactive, ref } from 'vue';const title = ref()
const isShowDialog = ref(false)
// 打开弹窗
const openDialog = () => {title.value = '修改表单值'isShowDialog.value = true
}
// 暴露变量
defineExpose({openDialog,
});
</script><style scoped lang="scss"></style>