vue子组件通过emit向父组件传参

子组件中传递

1、在子组件中导入defineEmits

import { defineEmits } from 'vue';

2、自定义事件及传递的参数类型

const emit = defineEmits<{
  (event: 'calculateResult', data: string): void;
}>();

3、在需要传递参数的地方使用emit函数

const calculate = async () => {
    const formData = new FormData();
    Object.keys(form).forEach(key => {
        formData.append(key, form[key]);
    });
    try {
        const response = await axios.post(config.baseUrl + '/explodepc', formData);
        if (response.status === 200) {
            const data = response.data;
            console.log(data);
            emit('calculateResult', data);
            
        }
    }
    catch (error) {
        console.log(error)
    }
}

父组件中接收

1、在导入子组件时绑定传递的事件

<FirstTheoryModel @calculateResult="handleCalculateResult" />

2、调用函数将传递出的值赋值

const handleCalculateResult = (data: string) => {
    result.value = data;
};