vue3中使用ref和emit来减少props的使用示例详解

<add-return-goods :visible.sync="openEdit" :detail="rowData" :title="editTitle" @addSuccess="getTableInfo"></add-return-goods>

<template>
    <el-dialog v-model="status.dialogVisible" title="批量修改状态" width="400px" :close-on-click-modal="false" draggable
        @close="closeDialog">
        <el-form :model="status.form" label-position="top">
            <el-form-item label="状态选择" prose="editStatus">
                <el-radio-group v-model="status.form.editStatus">
                    <el-radio :label="1">使用</el-radio>
                    <el-radio :label="0">停用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-button type="primary" :loading="status.saveLoading" @click="save">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
export default {
    name: 'batch-edit-state',
}
</script>

<script setup lang="ts">
import { reactive, defineExpose, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import { BtUseAppStore } from 'beeboat-ui/es/core/store'
const appStore = BtUseAppStore()
const http = appStore.getHttp()

const emit = defineEmits(['save', 'saveSuccess'])

let status = reactive({
    form: {
        //修改状态
        editStatus: 1,
    },
    dialogVisible: false,
    //保存加载
    saveLoading: false,
})

//打开弹窗
let open = (value: number) => {
    if (![0, 1].includes(value)) {
        ElMessage.warning('状态弹窗缺少入参或参数值错误!')
        return false
    }
    status.dialogVisible = true
    status.form.editStatus = value
}

//关闭弹窗
let closeDialog = () => {
    status.dialogVisible = false
    status.form.editStatus = 1
    status.saveLoading = false
}

//保存
let save = () => {
    status.saveLoading = true
    emit('save', status.form.editStatus, saveState)
}

//根据入参，调用保存接口
let saveState = (url: string, params: any) => {
    http.post(url, params)
        .then(() => {
            ElMessage.success('修改成功！')
            closeDialog()
            emit('saveSuccess')
        })
}

defineExpose({
    open,
})
</script>


<batch-edit-state ref="stateRef" @save="editStateSave" />
let editStateSave = (value: number, callback) => {
    callback(url,params)
}