vue 中 props 用法使用总结和示例演示

以下是 Vue 中 props 的用法总结及示例演示：

一、核心作用与基本原则

1. 核心作用

   • 父子组件通信：props 是父组件向子组件传递数据的单向通道，用于实现组件间的数据共享[¹][³][⁷]。
   • 数据验证与规范化：通过类型声明、必填项设置、默认值等确保数据合理性[¹][²][⁵]。

2. 基本原则

   • 单向数据流：数据只能从父组件流向子组件，子组件不可直接修改 props（若需修改需通过事件通知父组件）[¹][³][⁵]。
   • 命名规范：父组件传递时使用短横线分隔（kebab-case），子组件定义时使用驼峰式（camelCase）[³][⁵]。

二、使用方法详解

1. 定义 props

形式	适用场景	示例
数组	简单声明接收的属性名	props: ['title', 'count']
对象	详细配置类型、默认值等	props: { title: String, count: { type: Number, default: 0 } }

2. 类型检查与验证

支持的类型包括 String、Number、Boolean、Array、Object、Function、Symbol 等[²][⁵]。具体示例如下：

• 基础类型检查：propA: Number。
• 多类型检查：propB: [String, Number]。
• 必填项：propC: { type: String, required: true }。
• 默认值：propD: { type: Number, default: 100 }。
• 自定义验证函数：propE: { validator: (value) => ['success', 'warning', 'danger'].includes(value) }[²][⁵]。

3. 默认值设置

• 基本类型：直接赋值（如 default: 0）。
• 引用类型：需用工厂函数返回新对象/数组，避免多个实例共享同一引用[⁵][⁷]。示例如下：
  • user: { type: Object, default: () => ({ name: '匿名用户', age: 18 }) }。
  • tags: { type: Array, default: () => ['vue', 'javascript'] }[⁷]。

4. 动态与静态传递

• 静态传递：直接写入固定值（适用于固定数据）[³][⁶]。
• 动态传递：绑定父组件的 data 或 computed 属性（适用于变化数据）[³][⁶]。

5. Vue 3 特性

• Composition API：使用 defineProps 声明 props[⁴][⁷]。
• TypeScript 支持：通过泛型或 PropType 定义复杂类型[⁷]。示例如下：
  • interface User { name: string; age: number }; const props = defineProps<{ user: User }>()。
  • book: { type: Object as PropType<Book>, required: true }[⁷]。

三、示例演示

1. 基础传递与渲染

父组件：

<template><ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {components: { ChildComponent },data() {return { parentMessage: 'Hello from Parent!' };}
};
</script>

子组件：

<template><p>{{ message }}</p>
</template>
<script>
export default {props: {message: { type: String, required: true } // 必填且为字符串}
};
</script>

2. 类型验证与默认值

子组件：

props: {age: {type: Number,default: 18, // 默认值validator(value) { return value >= 0 && value <= 150; } // 自定义验证},hobbies: {type: Array,validator(value) { return value.length > 0; } // 至少一个元素}
}

3. Vue 3 Composition API 示例

子组件：

const props = defineProps({title: { type: String, required: true }, // 必填字符串count: { type: Number, default: 0 },     // 可选数字，默认0user: {                                  // 对象类型type: Object,default: () => ({ name: 'Guest', age: 20 })}
});

4. 动态传递与响应式更新

父组件：

<template><input v-model="parentMessage" placeholder="输入消息" /><ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {components: { ChildComponent },data() {return { parentMessage: '' };}
};
</script>

子组件：

<template><div><p>{{ message }}</p> <!-- 实时响应输入 --></div>
</template>
<script>
export default {props: { message: String }
};
</script>

四、注意事项

1. 禁止直接修改 props：子组件应通过 $emit 触发事件通知父组件修改数据[¹][³][⁵]。
2. 引用类型默认值：必须使用工厂函数返回新对象/数组，避免多个实例共享同一引用[⁵][⁷]。
3. 非 prop 属性处理：未声明的属性会绑定到子组件的根元素，可通过 inheritAttrs: false 和 $attrs 手动处理[⁵]。
4. Vue 3 弃用 .sync：改用 v-model 实现双向绑定[⁵]。

总之，通过合理使用 props，可以实现父子组件间高效、安全的数据交互。在实际开发中，根据项目需求选择合适的 props 设置方式，能够提高代码的可维护性和稳定性。