v-bind="$attrs" types error

[koalagogogo]

[email protected], [email protected]

error info:

Argument of type '{ [x: string]: unknown; }' is not assignable to parameter of type '{ readonly title: string; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<{ title: string; }> & Readonly<...> & Record<...>'.
Property 'title' is missing in type '{ [x: string]: unknown; }' but required in type '{ readonly title: string; }'.

Home.vue

<template>
  <Create title="sub create"></Create>
  homepage
</template>
<script setup lang="ts">
import Create from './Create.vue';
</script>

Create.vue

<template>
  <SubCreate v-bind="$attrs"></SubCreate>
  create page
</template>
<script setup lang="ts">
import SubCreate from './SubCreate.vue';
defineOptions({
  inheritAttrs: false,
});
</script>

SubCreate.vue

<template>
  <div>{{title}}</div>
  sub Page
</template>
<script setup lang="ts">
withDefaults(
  defineProps<{
    title: string;
  }>(),
  {
    title: '',
  },
);
</script>

[czelsa]

Instead of using $attrs to pass title, pass it explicitly to meet typeScript requirements:
soo: <SubCreate :title="$attrs.title"></SubCreate>