Vue3第十一天，使用props

这里的props用来结合TypeScript来进行类型限定，如下所示：

这个我们可以定义他为index.ts,在我们的src目录下创建types.

// 定义一个接口，限制每个Person对象的格式
export interface PersonInter {
id:string,
name:string,
 age:number
}

// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>

然后我们可以使用TS中的类型限定，如下代码：

<template>
	<Person :list="persons"/>
</template>

<script lang="ts" setup name="App">
import Person from './components/Person.vue'
import {reactive} from 'vue'
 import {type Persons} from './types'

 let persons = reactive<Persons>([
  {id:'e98219e12',name:'张三',age:18},
   {id:'e98219e13',name:'李四',age:19},
    {id:'e98219e14',name:'王五',age:20}
  ])
</script>

这里我们解释一下：

import {type Persons} from './types'

你们可能会说这里可能会出错，为什么没有写成引入./types/index.ts，原因是TypeScript也是默认支持引入index.ts的。也就是说我们只要写了目录，他就会自动引入目录下的index.ts.

let persons = reactive([ ...

这里我们就是使用的Persons的类型限定。文件就是./src/types/index.ts中导出的Persons。

这里是我们的子元素Person,如下所示：

<template>
<div class="person">
<ul>
  <li v-for="item in list" :key="item.id">
     {{item.name}}--{{item.age}}
   </li>
 </ul>
</div>
</template>

<script lang="ts" setup name="Person">
import {defineProps} from 'vue'
import {type PersonInter} from '@/types'

// 第一种写法：仅接收
// const props = defineProps(['list'])

// 第二种写法：接收+限制类型
// defineProps<{list:Persons}>()

// 第三种写法：接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{
  list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]
})
console.log(props)
</script>

上面详细说了如何使用props,一共有三种方法。

const props = defineProps(['list'])

这是我们的第一种，不限定传入组件的类型，也就是没有使用类型限定

defineProps<{list:Persons}>()

这是第二中，接收数据并限制数据类型，这里我们的list数据严格按照Persons的数据接口类型的要求来传输

接收+限制类型+指定默认值+限制必要性

let props = withDefaults(defineProps<{list?:Persons}>(),{ list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}] })

上面的就是我们的第三种。使用了withDefaults设置默认值。

感谢大家观看，我们下次见