7.1 defineProps接收参数
props最主要的作用就是接收父组件的传参，在Vue2里直接使用props接收参数即可，而在vue3需要依赖defineProps来接参。
这里举一个简单的例子，父组件传一个数组给子组件渲染出来。下面分别对比一下2和3的语法：
父组件Person.vue：
<template>
<div class="person">
<Child :list="personList"></Child>
</div>
</template>
<script lang="ts" setup name="Person">
import Child from './Child.vue'
let personList = [
{id:'asyud7asfd01',name:'张三',age:60},
{id:'asyud7asfd02',name:'李四',age:18},
{id:'asyud7asfd03',name:'王五',age:5}
]
</script>
子组件Child.vue：
<template>
<div class="child">
<ul>
<li v-for="p in list" :key="p.id">
{{ p.name }} -- {{ p.age }}
</li>
</ul>
</div>
</template>
1、Vue2
Vue2的接参方式是把参数放在props里。
<script>
export default {
props: {
list: null
}
}
</script>
这里先不限定接参的类型，在后面会详细讲解。
2、Vue3
Vue3的接参方式有点不同，它需要依赖defineProps函数。它里面传入一个数组，里面的每一项是接参的参数名。
<script lang="ts" setup>
defineProps(['list'])
</script>
7.2 使用props参数
对Vue2来说，props的参数跟定义在data里的属性一样，直接使用this.即可读取；但是Vue3相对麻烦一些，它需要先把props存起来，然后再使用。
1、Vue2
<script>
export default {
props: {
list: null
},
mounted() {
console.log(this.list);
}
}
</script>
2、Vue3
Vue3可得注意一下，不能直接使用props里的参数，必须先定义一个变量把props存起来，然后再使用。我们先打印一下整个props的结构：
<script lang="ts" setup>
const propParam = defineProps(['list'])
console.log(propParam)
</script>
实际上它帮我们包裹成一个对象，我们如果要使用，就以键值对来读取即可，例如上面读取list参数，那就是propParam.list。
7.3 限制props参数类型
1、Vue2
Vue2添加类型限制有两种方式，一种是直接在冒号:后面加类型，一种是通过对象里的type进行设置。
<script>
export default {
props: {
/* 第一种 */
// list: Array,
/* 第二种 */
list: {
type: Array
}
}
}
</script>
2、Vue3
Vue3的类型限制是通过defineProps的泛型实现。它里面传入一个对象，通过键值对的方式对每一个参数进行设置。
<script lang="ts" setup>
const propParam = defineProps<{list: Array<object>}>();
</script>
当然如果想使用ts的接口或者自定义类型来进行设置也是可以的，用法一样。
src/types/index.ts：
// 定义一个接口，用于限制person对象的具体属性
export interface PersonInter {
id:string,
name:string,
age:number
}
/* 一个自定义类型 */
export type Persons = PersonInter[]
src/components/child.vue：
<script lang="ts" setup>
import {type Persons} from '@/types'
const propParam = defineProps<{list: Persons}>();
</script>
注意：使用了泛型来限制参数类型之后，defineProps方法里就不要传数组了，因为它通过泛型就已经知道你要接收的参数了。例如没有添加限制的写法是defineProps(['list'])，添加类型限制后就写成defineProps<{list: Persons}>()。
7.4 限制是否必传
1、Vue2
vue2限制参数必传是通过设置required为true，它默认值是非必传的。
<script>
export default {
props: {
list: {
type: Array,
required: true
}
}
}
</script>
2、Vue3
vue3分两种情况：第一种是没有限制类型，把数组传入到defineProps里，比如defineProps([‘list’])，那么它默认是非必传的；第二种是使用泛型限制参数类型，比如defineProps<{list: Persons}>()，则它默认是必传的。如果想设置它为非必传，则在限制类型的冒号:前加一个?，写成?:，这也是ts的一种语法。
(1)第一种情况：不限制类型
<script lang="ts" setup>
defineProps(['list'])
</script>
(2)第二种情况：使用泛型限制类型
<script lang="ts" setup>
import {type Persons} from '@/types'
const propParam = defineProps<{list: Persons}>()
</script>
我们通过?:即可设置成非必传属性。
<script lang="ts" setup>
import {type Persons} from '@/types'
const propParam = defineProps<{list?: Persons}>()
</script>
7.5 设置默认值
1、Vue2
Vue2的默认值是通过default进行设置的，它同样有两种情况，一种是基本类型，一种是引用类型。基本类型直接写入默认值，而引用类型需要通过函数返回的形式设置默认值。
<script>
export default {
props: {
// 基本类型
num: {
type: Number,
default: 123
},
// 对象类型
obj: {
type: Object,
default: () => {
return {id: 123, name: 'test'}
}
},
// 数组类型
list: {
type: Array,
default: () => [{id: 123, name: 'test'}]
},
// 函数类型
fn: {
type: Function,
default: () => {
console.log(123)
}
}
}
}
</script>
2、Vue3
Vue3的默认值需要依赖withDefaults函数，withDefaults函数需要传入两个参数，第一个参数把整个defineProps的内容传进去，第二个参数用来设置默认值，它是一个对象，通过键值对的方式对每个属性进行设置。
注意：Vue3跟Vue2对基本类型和引用类型的设置是一样的，基本类型可以直接设置，引用类型需要包裹一个函数返回，像上述代码没有包裹函数则提示警告，只需要添加函数返回即可。
<script lang="ts" setup name="Person">
import {type Persons} from '@/types'
const propParam = withDefaults(defineProps<{list?:Persons}>(), {
list: () => [{id:'ausydgyu01',name:'康师傅·王麻子·特仑苏',age:19}]
})
</script>
父组件Person.vue：
<template>
<div class="person">
<Child></Child>
</div>
</template>
7.6 示例代码
文件目录：src_07_props
原文链接：https://juejin.cn/post/7337896254544937014 作者：sowhat88
