Vue3 props 属性

Vue3 选项式 API 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>

解释

  1. 父组件：在父组件中，我们通过 :message="parentMessage" 将 parentMessage 数据传递给子组件。parentMessage 是父组件中定义的一个变量，其值为 'Hello from Parent!'。

  2. 子组件：在子组件中，我们使用 props 接收父组件传递过来的数据。message 是子组件中定义的 props，其类型为 String，并且设置为 required: true，表示这个 props 是必需的。

  3. 渲染：子组件接收到 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;
    }
  }
}

解释

  1. **type**：指定 props 的数据类型。可以是 String、Number、Boolean、Array、Object 等。

  2. **required**：指定 props 是否为必需。如果设置为 true，父组件必须传递该 props，否则会抛出一个警告。

  3. **default**：为 props 设置默认值。如果父组件没有传递该 props，子组件将使用默认值。

  4. **validator**：自定义验证函数，用于验证 props 的值是否符合特定条件。

注意事项

  1. 单向数据流：在 Vue.js 中，props 是单向的，即数据只能从父组件流向子组件。子组件不应该直接修改 props 的值。如果需要修改，可以通过触发事件通知父组件进行修改。

  2. 命名规范：props 的命名建议使用驼峰式命名法，例如 userName。在父组件中传递 props 时，建议使用短横线分隔符，例如 user-name。

  3. 动态 props：可以通过 v-bind 或 : 动态绑定 props，例如 :message="parentMessage"。

Vue3 选项式 API Vue3 选项式 API