vue3+Ts 父子组件通信并传入额外参数

适用于：子组件传值给父组件并且父组件还需要传递自己的值

方案一 推荐

$even 适用于一个参数
示例传值和方法

子组件

<template>
  <div @click="handleChild">test</div>
</template>

<script lang="ts" setup>
  interface Params {
    name: string;
    age: number;
    cb: () => void;
  }
  interface Emits {
    (e: 'custom', params: Params): void;
  }

  const emit = defineEmits<Emits>();
  function handleChild() {
    emit('custom', {
      name: 'zs',
      age: 18,
      cb: () => {
        console.log('child');
      },
    });
  }
</script>

父组件

<Test @custom="handleCustom($event, 1)" />

function handleCustom(params: { name: string; age: number; cb: () => void }, id: number) {
	console.log('custom', params, id);
	params.cb();
}

方案二

通过箭头函数接收参数在返回，可用于多个参数

子组件

<template>
  <div @click="handleChild">test</div>
</template>

<script lang="ts" setup>
  interface Emits {
    (e: 'custom', name: string, age: number): void;
  }
  const emit = defineEmits<Emits>();
  function handleChild() {
    emit('custom', 'zs', 18);
  }
</script>

<Test @custom="(name:string, age:number) => handleCustom(name, age, 1)" />
function handleCustom(name: string, age: number, id: number) {
	console.log('custom', name, age, id); //  zs 18 1
}