组件二封时原组件事件应该如何定义可以兼顾类型和便捷性？

[l246804]

<script setup lang="ts">
import type { InputPropsPublic, InputEmits } from 'element-plus'

defineProps<{} & InputPropsPublic>()

// 使用 defineEmits 后，事件会跟 props 一样被组件自身消费掉，无法在 $attrs 里面获取，
// 这里除了 emits 一个一个重新抛出外还有别的比较便捷吗？
const emits = defineEmits<InputEmits>()
</script>

<template>
  <ElInput v-bind="{ ...$props, ...$attrs }" />
</template>

[Shyam-Chen]

<script lang="ts" setup>
import type { InputHTMLAttributes } from 'vue';

interface Props extends /* @vue-ignore */ InputHTMLAttributes {
  // ...
}

defineOptions({
  inheritAttrs: false,
});

const props = defineProps<Props>();
</script>

[Shyam-Chen]

使用 on 前綴，用 import type { ComponentProps } from 'vue-component-type-helpers'; 提取。

[l246804]

麻烦给个较为完整的代码示例

[Shyam-Chen]

<script lang="ts" setup>
import type { ComponentProps } from 'vue-component-type-helpers';
import { XTextField } from '@x/ui'; 

type TextFieldProps = ComponentProps<typeof XTextField>;

interface Props extends /* @vue-ignore */ TextFieldProps {
  // my props
}

defineOptions({
  inheritAttrs: false,
});

const props = defineProps<Props>();
const emit = defineEmits</* my events */>();
</script>

<template>
  <XTextField v-bind="$attrs" />
</template>

[Shyam-Chen]

覆蓋原本事件：

<script lang="ts" setup>
import type { ComponentProps } from 'vue-component-type-helpers';
import { XTextField } from '@x/ui'; 

type TextFieldProps = ComponentProps<typeof XTextField>;

interface Props extends /* @vue-ignore */ Omit<TextFieldProps, 'onClick'> { // Exclude a specific event from a component.
  // my props
}

defineOptions({
  inheritAttrs: false,
});

const props = defineProps<Props>();
const emit = defineEmits<(evt: 'click', payload: MouseEvent) => void>(); // Emit an event with the same name as the original event, but change the operation to your own.

function onMyClick() {
  // You can now modify the original event; it will still use the same name as the original.
  emit('click', /* ... */);
}
</script>

<template>
  <XTextField v-bind="$attrs" @click="onMyClick()" /> <!-- Change the original event to your own -->
</template>

[l246804]

如果有能不借用三方库实现的方法会更好，可惜目前来看好像还不行，可能得等 v3.6 出来在看？