【Vue-Day11】props的使用

一.props是什么？

二.props的使用

2.1父组件向子组件传递数据

[2.2 子组件接收props并保存](#2.2 子组件接收props并保存)

[2.3接收props + 限制props类型](#2.3接收props + 限制props类型)

[2.4 接收props + 限制类型 + 可选props + 指定默认值](#2.4 接收props + 限制类型 + 可选props + 指定默认值)

一.props是什么？

props用于实现父组件向子组件的单向数据传递。(父组件传数据，子组件用props接收)

它有以下几个特性：

单向性： 数据仅能从父组件传递到子组件 ，子组件无法直接修改Props数据（只读性）。
规范性 ：子组件需明确声明接收的Props，包括类型、必选性、默认值等，确保数据传递的可预测性。
通用性：支持传递基本类型、复杂类型（对象、数组），以及函数（用于子向父通信的回调）。

二.props的使用

2.1父组件向子组件传递数据

父组件可以通过 props 向子组件传递数据。

基本流程：

父组件 定义数据
在 子组件标签属性 中传递数据
子组件使用 defineProps 接收

1.父组件定义数据：

TypeScript 复制代码

import { reactive } from 'vue'
import type { Persons } from '@/types'

let personList = reactive<Persons>([
  { id: '01', name: '张三', age: 18 },
  { id: '02', name: '李四', age: 20 },
  { id: '03', name: '王五', age: 22 }
])

定义数据时可以使用泛型约束类型。reactive本身就返回一个对象，可以把泛型放在reactive后。

2.父组件传递数据

TypeScript 复制代码

<Person :list="personList" />

传递数据需要注意 ：字符串可以直接写，变量或表达式需要用 : (v-bind)传递

2.2 子组件接收props并保存

在script里使用defineProps接收。

defineProps 返回一个对象，对象里面包含所有 props数据，这些数据需要用数组的形式包裹传递。此时在模板里可以使用传递进来的数据，

但要对传进来的数据进行一些处理（不能修改），就需要在子组件里定义一个变量存储传进来的数据。

TypeScript 复制代码

let props = defineProps(['list'])   // 保存 props

2.3接收props + 限制props类型

为了避免父组件传递错误数据 ，可以对数据限制类型。

defineProps可以传递泛型：

TypeScript 复制代码

defineProps<{ list: Persons }>()

在<>里是一个对象，对象为要接收的 list（告诉父组件我要接收一个list数据），并且对 list 数据进行类型限制（告诉父组件接收的list数据要符合Persons这个类型规范）。

简单来说就是：子组件接收 list。list必须符合Persons类型。

2.4 接收props + 限制类型 + 可选props + 指定默认值

如果某个 props 不是必须传递的，可以使用？进行限制。

TypeScript 复制代码

defineProps<{ list?: Persons }>()

**？**表示可选。

指定默认值：当父组件不传数据时，子组件可以自己设置默认值。

使用 withDefaults 设置默认值

TypeScript 复制代码

import { withDefaults } from 'vue'

withDefaults(
  defineProps<{ list?: Persons }>(),
  {
    list: () => [
      { id: 'abc', name: '张三', age: 17 }
    ]
  }
)

注意： 对象或数组必须使用函数返回