Vue3组合式API跨组件调用函数并传参问题求助

1. 函数名称不匹配（核心报错原因） #

你的代码存在多处函数名称不一致的问题，这是导致getCalls is not a function报错的直接原因：

• 组合式函数useNcalls中定义的函数是getCall，但你在子组件返回时写的是getCalls，还错误地在组合式函数里写了expose({ getCalls })
• 父组件调用的是nAsignedCalls.getCalls(param_search)，但实际子组件并没有暴露这个名称的函数

修复：统一函数名称 #

保持所有地方的函数名称一致（比如都用getCall）：

• 删除组合式函数里错误的expose({ getCalls })（expose是组件<script setup>的API，组合式函数不需要）
• 子组件返回时改成getCall
• 父组件调用时改为nAsignedCalls.value.getCall(param_search)（Vue3中ref绑定的组件实例需通过.value访问）

2. 父组件ref访问错误 #

Vue3中，通过ref获取子组件实例时，必须通过.value属性访问组件实例，你直接写nAsignedCalls.getCalls()的写法是错误的。

3. 父组件获取表单值的方式不规范 #

不要用document.getElementById直接操作DOM获取输入值，Vue3推荐用v-model绑定响应式数据：

<!-- 父组件模板 -->
<input type="text" v-model="address">
<input type="text" v-model="city">
<input type="text" v-model="cp">
<input type="button" class="btn btn-dark" value="Buscar registros" @click="searchRegisters()">

// 父组件脚本
const address = ref('');
const city = ref('');
const cp = ref('');
const nAsignedCalls = ref(null);

function searchRegisters(){
    let param_search = '';

    // 优化判断逻辑，避免最后一个非空值覆盖前面的
    if (address.value) {
        param_search = "address";
    } else if (city.value) {
        param_search = "city";
    } else if (cp.value) {
        param_search = "cp";
    }

    // 增加实例存在判断，避免空值调用报错
    if (nAsignedCalls.value) {
        nAsignedCalls.value.getCall(param_search);
    }
}

同时修复了param_search未声明的问题（之前会隐式变成全局变量）。

4. 子组件暴露函数的正确方式 #

如果子组件使用<script setup>语法，需要用defineExpose主动暴露函数给父组件：

// 子组件脚本
import useNcalls from './useNcalls';

const { calls, getCall } = useNcalls();

// 暴露函数给父组件
defineExpose({
    getCall
});

5. 组合式函数的修正 #

删除组合式函数里错误的expose语句，并修正axios参数格式（GET请求参数需放在params字段，后端才能正确解析）：

export default function useNcalls(){
    let calls = ref([])
    let param_search = ref([])
    let pagination = ref([])

    const getCall = async (param_search) => {
        // 修正axios参数格式
        let response = await axios.get('/api/callApi', { params: { param_search } }) 
        console.log(response.data.data)
        calls.value = response.data.data
    } 
    // 其他函数保持不变...

    return{
        calls,
        getCall, // 返回正确的函数名称
        deleteCall,
        queryForKeywords,
        getResults,
        getItems
    } 
}

6. 子组件返回值的修正 #

确保子组件返回的函数名称与组合式函数一致：

// 子组件中
return {
   ...
   getCall // 不是getCalls
}

总结修复步骤 #

1. 统一所有地方的函数名称为getCall
2. 父组件通过nAsignedCalls.value.getCall(...)调用子组件函数
3. 子组件用defineExpose暴露getCall函数（<script setup>场景）
4. 父组件改用v-model绑定表单值，避免直接操作DOM
5. 修正组合式函数里的axios参数格式，删除错误的expose语句

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