vue3里面子组件调用父组件的方法,子组件传值,父组件接收的时候是undefined

项目场景：

这里记录一次vue3使用过程当中,使用 emit 来实现子组件调用父组件的方法这个过程中自己踩的雷

项目环境使用的是 vue3 + TS
这里实际的业务场景是在一个 vue 组件中使用了一个 form 表单,form表单中调用了父组件的方法

---

问题描述

使用 emit 来实现子组件调用父组件的方法
子组件传参父组件接收的是 undefined

首先先把 vue3+ts+vben 中的代码贴出来
<!--father-->

<template>
  <div>
    <div class="bg-white mb-2 p-4">
    <!--中间省略掉的是其他的业务代码-->
    <InputForm   
      @register="registerDrawer"
      @success="getData({})"
      :customerOptions="customers"  
      @updateSite='updateMySite()'
      @changeMessage='changeMyMessage'
    />
  </div>
</template>

<script lang="ts" setup>
  import ......
  // customerOptions
  const customers= reactive([] as any[]);
  customerList().then((res) => {
    
    
    res.list.forEach((element) => {
    
    
      console.log('here is form component');
      customers.push({
    
     value: element.id, label: element.name });
    });
  });
  console.log(customers);

  const updateMySite= (customerId: string,siteOptionsArr: Array) => {
    
    
    console.log('这里的方法执行了123456');
    console.log(customerId);
    console.log(siteOptionsArr);  
  };
	function changeMyMessage(data,siteOptionsArr: Array) {
    
    
	  console.log('父组件的事件被触发了',data)
	  console.log('父组件的事件被触发了',siteOptionsArr)
	}
</script>

其中 :customerOptions 是父组件向子组件传的值
updateSite 以及 changeMessage 是绑定在子组件上的事件,可以在子组件当中通过 emit 来调用父组件的函数
@updateSite='updateSite()' 这里的写法中, updateSite 后面跟上了小括号,这会是导致子组件调用父组件函数传递的参数父组件中接收到不到
@changeMessage='changeMessage' 这样子写才是对哒

---

<!--child-->

<script lang="ts" setup>
  import {
    
     defineComponent, defineProps } from 'vue';
  import {
    
     ref, computed, reactive } from 'vue';
  import {
    
     useI18n } from '/@/hooks/web/useI18n';
  import {
    
     useMessage } from '/@/hooks/web/useMessage';
  import {
    
     router } from '/@/router';
  import {
    
     Icon } from '/@/components/Icon';
  import {
    
     BasicForm, FormSchema, useForm } from '/@/components/Form';
  import {
    
     BasicDrawer, useDrawerInner } from '/@/components/Drawer';

	// 这里通过 defineProps 来获取  父 -- > 子   的传值
	// 记得需要先 import {  defineProps } from 'vue'; 
  const props = defineProps({
    
    
    customerOptions: {
    
    
      type: Array,
    },
  });
  // 这里通过 defineEmits 来讲事件 emm 注册 ? 绑定 ? 到 emit 对象上
  // 这里好像是没有 import from vue 就能用来着
  const emit = defineEmits(['success', 'register','updateSite','changeMessage']);



  const siteOptions = reactive([] as any[]);
  // 这里是在子组件的某个函数内,调用父组件的 changeMessage and updateSite
  const handleCustomerChange = (value: string) => {
    
    
    console.log(typeof value)
    emit('changeMessage', value,siteOptions) // 会发现这里的参数传过去了
    emit('updateSite', value,siteOptions)      // 会发现这里的参数没有传过去
  };
</script>

原因分析：

子组件调用父组件的函数,父组件却接收不到子组件调用函数时候传递的参数 !!! ：
使用 @ 绑定函数的时候不要 ! 不要 !! 不要 !!! 不要 !!! 加括号

---