Vue 3 给组件声明 props：defineProps 怎么写、怎么传

目标：在 Vue 3 单文件组件里显式声明 props，并从父组件传入标题一类数据。步骤与示例来自 Vue 官方中文文档「组件基础 / Props」。[1][2]

准备工作

  • 已有 Vue 3 项目（Vite 创建即可）

  • 会编辑 .vue 单文件组件

操作步骤

1、在子组件用 defineProps 声明

做什么：在 <script setup> 里声明 title。
为什么：Vue 需要显式声明，才能区分 props 和透传 attribute。[2]
如何确认：模板里能渲染 title，且父组件传错类型时开发模式控制台会警告（对象声明时）。

<script setup>
defineProps(['title'])
</script>

<template>
  <h4>{{ title }}</h4>
</template>

2、父组件传入静态或动态值

做什么：在父组件写 <BlogPost title="..." /> 或 :title="post.title"。[1]
为什么：静态字符串直接写 attribute；动态数据用 v-bind 简写。
如何确认：页面上标题随父组件数据变化。

<BlogPost
  v-for="post in posts"
  :key="post.id"
  :title="post.title"
/>

3、需要校验时改成对象声明

做什么：把数组声明换成带 type / required / default 的对象。[2]
为什么：开发环境能对错误类型报警，也方便当文档。
如何确认：故意传错类型时控制台出现 prop 校验警告。

defineProps({
  title: { type: String, required: true },
  likes: { type: Number, default: 0 }
})

注意事项

  • props 默认只读，子组件里直接改 props.xxx 会警告；要改成本地状态请 ref(props.xxx) 另存。[2]

  • DOM 内模板更常见 kebab-case 传参（greeting-message），脚本里用 camelCase。[2]

  • 以官网当前文档为准，本文核实日期 2026-10-24。

来源

[1] 组件基础 · 传递 props，Vue.js。

[2] Props，Vue.js。

#Vue3 #props #defineProps #组件 #前端