index.vue

<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-button v-perms="['resources.region/add']" type="primary" @click="handleAdd">
                <template #icon>
                    <icon name="el-icon-Plus" />
                </template>
                新增
            </el-button>
        </el-card>        
        <edit-popup
            v-if="showEdit"
            ref="editRef"
            @close="showEdit = false"
        />
    </div>
</template>

<script lang="ts" setup name="regionLists">
// 注意这里的EditPopup是edit-popup的名称，这里改了，上面弹框组件名称也要改
import EditPopup from './edit.vue'

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)

// 添加
const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open()
}

</script>

edit.vue

<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            title="测试"
            :async="true"
            width="550px"
        >
            123456
        </popup>
    </div>
</template>

<script lang="ts" setup name="regionEdit">

import Popup from '@/components/popup/index.vue'
const popupRef = shallowRef<InstanceType<typeof Popup>>()


//打开弹窗
const open = () => {
    popupRef.value?.open()
}

defineExpose({
    open
})
</script>