vue3.0（ts）子组件传递多个参数时，父组件接收其他附加参数（arguments无效）

场景说明

• 当业务需要在子组件回调的参数基础上增加额外参数时，arguments接收多个参数异常
  如@change="changeHandle(arguments, 123456)"
• 模板内联函数无法添加ts类型，eslint报错
  如@change="(value, option) => changeHandle(value, option, 123456)"
• 百度无果后参照官方文档 元素绑定事件进行魔改

文章编写时代码环境

• vue@3.2.37
• ant-design-vue@3.2.11
• vite@2.9.15
• typescript@4.7.4

使用方式

子组件emit

<!--子组件 child.vue-->
<template>
<div>
    child content
</div>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue'
const emits = defineEmits(['change'])
emits('change', 'hello world', '2023/05/10')
</script>

父组件v-on接收

<!--父组件 parent.vue-->
<template>
    <child v-on="{
        change: changeHandle(123456)
    }"></child>
</template>

<script setup lang="ts">
import child from './child.vue'

const changeHandle = (num: number) => {
  return function (word:string, date:string) {
    console.log(word, date, num)
  }
}
</script>

antdv 使用select 组件

<template>
  <a-select
    v-model:value="value"
    :options="options"
    style="width: 120px"
    v-on="{
      change: changeHandle(111)
    }"
  >
  </a-select>
</template>
<script lang="ts" setup>
  import type { SelectProps } from 'ant-design-vue'
  import type { DefaultOptionType } from 'ant-design-vue/es/select'
  import { ref } from 'vue'
  import { SelectValue } from 'ant-design-vue/lib/select'

  const changeHandle = (num: number): SelectProps['onChange'] => {
    return function (value, option) {
      console.log(value, option, num)
    }
  }
  const options = ref<SelectProps['options']>([
    {
      value: 'jack',
      label: 'Jack (100)',
      test: 1111
    },
    {
      value: 'lucy',
      label: 'Lucy (101)',
      test: 2222
    },
    {
      value: 'san',
      label: 'san (102)',
      test: 333
    }
  ])
  const value = ref({ value: 'lucy' })
</script>