Vue3 props 属性

Vue3 选项式 API

props 是组件之间传递数据的一种方式。

在 Vue.js 中，父组件可以通过 props 将数据传递给子组件。子组件接收到这些数据后，可以根据数据进行渲染或执行其他操作。

类比理解

可以将 props 想象成一个邮递员。父组件是寄件人，子组件是收件人。父组件将数据（信件）通过 props（邮递员）传递给子组件。子组件收到数据后，可以根据数据内容进行处理。

如何使用 props？

在 Vue.js 中使用 props 非常简单。下面我们通过一个例子来说明如何使用 props。

示例：传递和接收 props

假设我们有一个父组件 ParentComponent 和一个子组件 ChildComponent。我们希望父组件向子组件传递一条消息。

1. 父组件（ParentComponent.vue）

实例

<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from Parent!'
};
}
};
</script>

2. 子组件（ChildComponent.vue）

实例

<template>
<div>
<p>{{ message }}</p>
</div>
</template>

<script>
export default {
props: {
message: {
type: String,
required: true
}
}
};
</script>

解释

父组件：在父组件中，我们通过 :message="parentMessage" 将 parentMessage 数据传递给子组件。parentMessage 是父组件中定义的一个变量，其值为 'Hello from Parent!'。
子组件：在子组件中，我们使用 props 接收父组件传递过来的数据。message 是子组件中定义的 props，其类型为 String，并且设置为 required: true，表示这个 props 是必需的。
渲染：子组件接收到 message 后，将其渲染到模板中，显示为 <p>Hello from Parent!</p>。

props 的类型和验证

在 Vue.js 中，可以为 props 指定类型和验证规则，以确保传递的数据符合预期。

示例：类型和验证

实例

props: {
message: {
type: String,
required: true
},
age: {
type: Number,
default: 18
},
hobbies: {
type: Array,
validator: function (value) {
return value.length > 0;
}
}
}

解释

**type**：指定 props 的数据类型。可以是 String、Number、Boolean、Array、Object 等。
**required**：指定 props 是否为必需。如果设置为 true，父组件必须传递该 props，否则会抛出一个警告。
**default**：为 props 设置默认值。如果父组件没有传递该 props，子组件将使用默认值。
**validator**：自定义验证函数，用于验证 props 的值是否符合特定条件。

注意事项

单向数据流：在 Vue.js 中，props 是单向的，即数据只能从父组件流向子组件。子组件不应该直接修改 props 的值。如果需要修改，可以通过触发事件通知父组件进行修改。
命名规范：props 的命名建议使用驼峰式命名法，例如 userName。在父组件中传递 props 时，建议使用短横线分隔符，例如 user-name。
动态 props：可以通过 v-bind 或 : 动态绑定 props，例如 :message="parentMessage"。