vue3获取组件的属性:

主要通过这个包实现:

npm i vue-component-type-helpers
  
npm地址:https://www.npmjs.com/package/vue-component-type-helpers
官方介绍:Some very simple type helpers used behind vue-component-meta for extract component props, slots, emit, exposed types.
这个包很实用，抓哟可以用老获取组件的props, slots, emit, exposed types，很牛逼

官网例子:

//组件HelloWorld.vue
<template>
	<slot name="header" :num="123" />
	<slot name="footer" str="abc" />
</template>

<script lang="ts" setup>
defineProps<{
	msg: string
}>()
</script>
  
//使用
import HelloWorld from './HelloWorld.vue'
import type { ComponentProps, ComponentSlots } from 'vue-component-type-helpers'

type Props = ComponentProps<typeof HelloWorld> // { msg: string }
type Slots = ComponentSlots<typeof HelloWorld> // { header(_: { num: number; }): any; footer(_: { str: string; }): any; }

实际使用:

import type AppStepper from "~/components/app/stepper/AppStepper.vue";
import type { ComponentProps } from 'vue-component-type-helpers'

const steps: ComponentProps<typeof AppStepper>["steps"] = [
{
    label: "Tickets",
    value: "tickets",
    route: {
      name: "events-id-event-settings-registration-tickets",
      params: route.params,
    },
  },
  {
    label: "Add-ons",
    value: "addons",
    route: {
      name: "events-id-event-settings-registration-addons",
      params: route.params,
    },
  },
];

其它vue工具:

https://github.com/vuejs/language-tools