props 接收父组件数据

最后更新：2026-10-22

props 声明组件对外接收的属性，支持数组简写与对象式的类型、必填、默认值校验。

📝 语法

export default {
  props: {
    title: { type: String, required: true },
    count: { type: Number, default: 0 }
  }
}

value	数组或对象：对象形式可写 type/required/default/validator

返回值：父组件传入的值，只读（单向数据流）

修改下面的代码，在预览区实时查看效果：

输出：

显示「问候（3 条）」。

⚠️ 注意 单向数据流：子组件不能直接改 prop，需要变更时 emit 事件通知父组件。

💡 提示 对象/数组默认值必须用工厂函数：default: () => [] 而不是 default: []。

ℹ️ 说明 kebab-case 传值映射 camelCase 声明：传 :post-title，声明 postTitle。

更多案例即将上线。

Q 子组件改 prop 会怎样？

A 开发环境会报警告，父组件重渲染时改动会被覆盖——应通过 emit 让父组件改。

Q 默认值写对象为什么会有警告？

A 多个实例会共享同一对象；用 () => ({}) 工厂函数让每个实例拿到新副本。

Q 能监听 prop 变化吗？

A 可以：watch: { title(newVal) { ... } } 或改用 computed 派生。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。