组件 Props 和 Emits 的类型声明

zzz

在 Vue 3 中，我们可以使用 TypeScript 为组件的 props 和 emits 提供类型声明。

1.Props的类型声明

  选项式API

1. import { defineComponent, PropType } from 'vue'
   
2. 
   
3. interface User {
   
4.   id: number
   
5.   name: string
   
6.   email: string
   
7. }
   
8. 
   
9. export default defineComponent({
   
10.   props: {
    
11.     // 基础类型
    
12.     title: String,
    
13.     count: {
    
14.       type: Number,
    
15.       required: true
    
16.     },
    
17.    
    
18.     // 对象类型
    
19.     user: {
    
20.       type: Object as PropType<User>,
    
21.       required: true
    
22.     },
    
23.    
    
24.     // 数组类型
    
25.     tags: {
    
26.       type: Array as PropType<string[]>,
    
27.       default: () => []
    
28.     },
    
29.    
    
30.     // 联合类型
    
31.     status: {
    
32.       type: String as PropType<'pending' | 'success' | 'error'>,
    
33.       default: 'pending'
    
34.     },
    
35.    
    
36.     // 函数类型
    
37.     onSubmit: {
    
38.       type: Function as PropType<(data: any) => Promise<void>>,
    
39.       required: false
    
40.     }
    
41.   }
    
42. })

复制代码

  组合式API < script setup >

1. <script setup lang="ts">
   
2. // 方式1: 使用接口
   
3. interface User {
   
4.   id: number
   
5.   name: string
   
6.   email: string
   
7. }
   
8. 
   
9. interface Props {
   
10.   title?: string
    
11.   count: number
    
12.   user: User
    
13.   tags?: string[]
    
14.   status?: 'pending' | 'success' | 'error'
    
15.   onSubmit?: (data: any) => Promise<void>
    
16. }
    
17. 
    
18. const props = defineProps<Props>()
    
19. 
    
20. // 方式2: 内联类型声明
    
21. const props = defineProps<{
    
22.   title?: string
    
23.   count: number
    
24.   user: User
    
25.   tags?: string[]
    
26.   status?: 'pending' | 'success' | 'error'
    
27.   onSubmit?: (data: any) => Promise<void>
    
28. }>()
    
29. 
    
30. // 方式3: 运行时声明 + 类型（支持默认值）
    
31. const props = withDefaults(defineProps<{
    
32.   title?: string
    
33.   count: number
    
34.   user: User
    
35.   tags?: string[]
    
36.   status?: 'pending' | 'success' | 'error'
    
37. }>(), {
    
38.   title: '默认标题',
    
39.   tags: () => ['vue', 'typescript'],
    
40.   status: 'pending'
    
41. })
    
42. </script>

复制代码

2. Emits 的类型声明

  选项式API

1. import { defineComponent } from 'vue'
   
2. 
   
3. export default defineComponent({
   
4.   emits: {
   
5.     // 无参数事件
   
6.     'click': null,
   
7.    
   
8.     // 带参数事件（运行时验证）
   
9.     'update:modelValue': (value: string) => typeof value === 'string',
   
10.    
    
11.     // 复杂参数事件
    
12.     'submit': (payload: { email: string; password: string }) => {
    
13.       return payload.email !== undefined && payload.password !== undefined
    
14.     }
    
15.   }
    
16. })

复制代码

  组合式API < script setup >

1. <script setup lang="ts">
   
2. // 方式1: 类型字面量（推荐）
   
3. const emit = defineEmits<{
   
4. (e: 'click'): void
   
5. (e: 'update:modelValue', value: string): void
   
6. (e: 'submit', payload: { email: string; password: string }): void
   
7. (e: 'error', message: string, code?: number): void
   
8. }>()
   
9. 
   
10. // 方式2: 更简洁的语法（Vue 3.3+）
    
11. const emit = defineEmits<{
    
12. click: []
    
13. 'update:modelValue': [value: string]
    
14. submit: [payload: { email: string; password: string }]
    
15. error: [message: string, code?: number]
    
16. }>()
    
17. 
    
18. // 使用示例
    
19. const handleClick = () => {
    
20. emit('click')
    
21. }
    
22. 
    
23. const handleInput = (value: string) => {
    
24. emit('update:modelValue', value)
    
25. }
    
26. 
    
27. const handleSubmit = () => {
    
28. emit('submit', { email: 'test@example.com', password: '123456' })
    
29. }
    
30. 
    
31. const handleError = () => {
    
32. emit('error', 'Something went wrong', 500)
    
33. }
    
34. </script>

复制代码

3.完整的组件示例

1. <script setup lang="ts">
   
2. // 类型定义
   
3. interface User {
   
4.   id: number
   
5.   name: string
   
6.   email: string
   
7.   avatar?: string
   
8. }
   
9. 
   
10. interface FormData {
    
11.   title: string
    
12.   content: string
    
13.   tags: string[]
    
14. }
    
15. 
    
16. // Props 类型
    
17. interface Props {
    
18.   user: User
    
19.   initialData?: FormData
    
20.   loading?: boolean
    
21.   disabled?: boolean
    
22.   maxLength?: number
    
23. }
    
24. 
    
25. const props = withDefaults(defineProps<Props>(), {
    
26.   loading: false,
    
27.   disabled: false,
    
28.   maxLength: 1000
    
29. })
    
30. 
    
31. // Emits 类型
    
32. const emit = defineEmits<{
    
33.   (e: 'submit', data: FormData): void
    
34.   (e: 'cancel'): void
    
35.   (e: 'update:user', user: Partial<User>): void
    
36.   (e: 'error', message: string): void
    
37. }>()
    
38. 
    
39. // 组件逻辑
    
40. const formData = reactive<FormData>({
    
41.   title: props.initialData?.title || '',
    
42.   content: props.initialData?.content || '',
    
43.   tags: props.initialData?.tags || []
    
44. })
    
45. 
    
46. const handleSubmit = () => {
    
47.   if (formData.title.trim() === '') {
    
48.     emit('error', '标题不能为空')
    
49.     return
    
50.   }
    
51.   
    
52.   emit('submit', { ...formData })
    
53. }
    
54. 
    
55. const handleUserUpdate = (updates: Partial<User>) => {
    
56.   emit('update:user', updates)
    
57. }
    
58. </script>
    
59. 
    
60. <template>
    
61.   <form @submit.prevent="handleSubmit" class="user-form">
    
62.     <div class="form-group">
    
63.       <label>标题</label>
    
64.       <input
    
65.         v-model="formData.title"
    
66.         :disabled="props.disabled || props.loading"
    
67.         :maxlength="props.maxLength"
    
68.       />
    
69.     </div>
    
70.    
    
71.     <div class="form-group">
    
72.       <label>内容</label>
    
73.       <textarea
    
74.         v-model="formData.content"
    
75.         :disabled="props.disabled || props.loading"
    
76.       />
    
77.     </div>
    
78.    
    
79.     <div class="actions">
    
80.       <button
    
81.         type="button"
    
82.         @click="$emit('cancel')"
    
83.         :disabled="props.loading"
    
84.       >
    
85.         取消
    
86.       </button>
    
87.       <button
    
88.         type="submit"
    
89.         :disabled="props.disabled || props.loading"
    
90.       >
    
91.         {{ props.loading ? '提交中...' : '提交' }}
    
92.       </button>
    
93.     </div>
    
94.   </form>
    
95. </template>

复制代码