vue中的props - 技术栈

一. 介绍

作为组件间通信方式的一种，props是用于实现父子组件传值的一种方式，可以让子组件接收并使用父组件传递过来的数据。

父组件通过属性的形式给子组件传值，子组件通过定义props来声明接收这些参数，且props是只读的。子组件不能直接修改props，会触发警告。如果想基于props修改数据，可在子组件内部定义计算属性实现。

二. 使用方法

子组件声明 Props（两种方式）

子组件需要先明确声明要接收哪些 Props，推荐使用对象形式（支持类型校验、默认值、自定义验证），基础场景也可以用数组形式。

方式 1：数组形式（简单场景）

javascript 复制代码

<template>
  <div>
    <p>接收的字符串：{{ msg }}</p>
    <p>接收的数字：{{ count }}</p>
  </div>
</template>

<script setup>
// 仅声明要接收的Props名称，无校验
const props = defineProps(['msg', 'count'])
</script>

方式 2：对象形式（推荐，带完整校验）

javascript 复制代码

<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <p>爱好：{{ hobbies.join('、') }}</p>
  </div>
</template>

<script setup>
// 声明Props并添加校验规则
const props = defineProps({
  // 基础类型校验
  name: String,
  // 多个可能的类型
  age: [Number, String],
  // 带默认值 + 类型校验 + 必传校验
  hobbies: {
    type: Array,
    required: true, // 必传
    default: () => [] // 数组/对象的默认值必须用函数返回（避免引用类型共享）
  },
  // 自定义验证规则
  score: {
    type: Number,
    validator: (value) => {
      // 验证分数必须在0-100之间
      return value >= 0 && value <= 100
    }
  }
})
</script>

父组件传递 Props

父组件通过属性绑定的方式给子组件传值，区分 "静态传值" 和 "动态传值"：

javascript 复制代码

<template>
  <div>
    <!-- 静态传值（直接传字符串） -->
    <Child name="张三" />

    <!-- 动态传值（绑定变量/表达式，用v-bind/:） -->
    
    <Child 
      :name="username" 
      :age="18" 
      :hobbies="['打球', '看书']"
      :score="95"
    />
  </div>
</template>

<script setup>
import Child from './Child.vue';

// 父组件的数据源
const username = '李四'
</script>

子组件使用 Props

子组件通过defineProps返回的props对象访问接收的值，注意：

Props 是只读的，子组件不能直接修改（比如props.age = 20会报错）；
如果需要基于 Props 修改数据，可在子组件内定义响应式变量接收 Props 的值：

javascript 复制代码

<template>
  <div>
    <p>原始年龄：{{ age }}</p>
    <p>修改后的年龄：{{ newAge }}</p>
    <button @click="newAge++">增加年龄</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  age: Number
})

// 定义响应式变量接收Props值，后续修改这个变量
const newAge = ref(props.age);

</script>

Props 的大小写规范

HTML 属性不区分大小写，因此父组件传递 Props 时，驼峰命名 要转为短横线命名：

javascript 复制代码

<!-- 父组件：驼峰myMessage转为短横线my-message -->
<Child :my-message="hello" />

<!-- 子组件：仍用驼峰声明 -->
const props = defineProps({
  myMessage: String
})

三、注意事项

单向数据流 ：父组件 Props 更新，子组件会自动更新；但子组件不能修改 Props，否则破坏数据流向（如需修改，可通过emit通知父组件修改）；
默认 值类型 ：数组 / 对象的默认值必须用函数返回（避免多个组件实例共享同一个引用）；
必传校验 ：required: true时，父组件未传值会触发控制台警告；
类型校验失败：Vue 会在开发环境控制台给出警告，但不会阻止运行。

Props 是 Vue 组件通信最基础、最常用的方式，推荐用对象形式声明 Props，支持类型、必传、默认值、自定义校验，数组形式仅适用于简单场景，掌握它能让组件间的数据传递更规范、更健壮。