Vue3中如何从父组件调用组合式函数内的匿名函数？

1. 修复 expose() should be called only once 警告 #

context.expose() 只能在 setup() 函数顶层调用一次，不能放在会多次执行的函数（如 searchRegisters）内部。

父组件修复： #

将 context.expose({ getCall }) 从 searchRegisters 中移出，放在 setup() 顶层：

setup(props, context) {
    var param_search = "";
    const { calls, getCall, deleteCall, queryForKeywords, getResults, getItems } = useNassignedCall()
    
    // 移至此处，仅调用一次
    context.expose({ getCall })

    // ... 其他函数定义 ...

    function searchRegisters(){
        // 移除此处的 context.expose
        var address = "";
        var city = "";
        var cp = "";

        address = document.getElementById("address").value
        if( address != "" ) {
            param_search = "address";
        }

        city = document.getElementById("city").value
        if( city != "" ) {
            param_search = "city";
        }

        cp = document.getElementById("postal_code").value
        if( cp != "" ) {
            param_search = "cp";
        }

        // 调用 getCall
        await getCall(param_search);
    }

    // ... 返回语句 ...
}

子组件修复： #

子组件中的 context.expose({ getCall }) 已在 setup() 顶层，无需修改，确保不重复调用即可。

2. 修复 getCall is not a function 错误 #

核心问题： #

• 父组件未正确调用 getCall，反而在 searchRegisters 中重复执行 expose()
• 解构赋值时名称不匹配（组合式函数返回 deleteCall，但代码中写了 deleteCalls）

修复： #

在父组件的 searchRegisters 中添加 getCall 调用（注意 getCall 是异步函数，需用 await）：

async function searchRegisters(){ // 改为 async 函数
    var address = document.getElementById("address").value
    var city = document.getElementById("city").value
    var cp = document.getElementById("postal_code").value

    param_search = "";
    if( address != "" ) {
        param_search = "address";
    } else if( city != "" ) {
        param_search = "city";
    } else if( cp != "" ) {
        param_search = "cp";
    }

    if (param_search) {
        await getCall(param_search);
    }
}

修正父组件中解构错误：

// 原代码
const { calls, getCall, deleteCalls, queryForKeywords, getResults, getItems } = useNassignedCall()

// 修正后
const { calls, getCall, deleteCall, queryForKeywords, getResults, getItems } = useNassignedCall()

同步更新 remove 函数：

function remove(id) {
    deleteCall(id)
}

3. 修复组合式函数中 axios 请求参数错误 #

useNcalls 的 getCall 函数中，axios GET 请求参数需放在 params 字段下，否则后端无法正确接收：

const getCall = async (param_search) => {
    // 原代码
    // let response = await axios.get('/api/callApi', {param_search: {'param_search': param_search} }) 
    
    // 修正后
    let response = await axios.get('/api/callApi', { params: {'param_search': param_search} }) 
    console.log("llego")
    calls.value = response.data.data
} 

4. 子组件其他错误修复 #

子组件存在相同的 deleteCalls 解构错误，以及 remove 函数调用不存在的 deleteDates：

// 原代码
const { calls, getCall, deleteCalls, queryForKeywords, getResults, getItems } = nUseCalls()

// 修正后
const { calls, getCall, deleteCall, queryForKeywords, getResults, getItems } = nUseCalls()

// 原 remove 函数
function remove(id) {
    deleteDates(id)
}

// 修正后
function remove(id) {
    deleteCall(id)
}

内容的提问来源于stack exchange，提问作者scorpions78