vue3中ts的基本用法_ts在vue3中的用法

定义类型（src/types/index.ts）
？代表可有可无

export interface Persons {
	id: number,
	name: string,
	age?: number
}
1
2
3
4
5

定义Person子组件（src/components/Person.vue）

<template>
	<ul>
		<li v-for="item in list" :key="item.id">
			{{item.name}} --- {{item.age}}
		</li>
	</ul>
</template>
1
2
3
4
5
6
7

<script setup lang="ts">
	import type {Persons} from '@/types';
	import {withDefaults} from 'vue';
	// 单纯的获取父级传过来的list
	defineProps(['list']);
	// 获取list，并限制类型
	defineProps<{list: Persons[]}>();
	// 获取list，并设置不必填
	defineProps<{list?: Persons[]}>();
	// 获取list，并设置默认值
	withDefaults(defineProps<{list?: Persons[]}>(), {
		list: () => [{id: 999, name: '我是默认值', age: 20}]
	});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

定义App父组件（src/App.vue）

<template>
	<Person :list="PersonList"/>
</template>
1
2
3

<script setup lang="ts">
	import Person from '@/components/Person.vue';
	import {reactive} from 'vue';
	import type {Persons} from '@/types';
	const PersonList = reactive<Persons[]>([
		{id: 1, name: '张三', age: 18},
		{id: 2, name: '李四', age: 19},
		{id: 3, name: '王五', age: 20}
	]);
</script>
1
2
3
4
5
6
7
8
9
10