defineProps 是 Vue3 中声明子组件接收父组件传值的核心方式，支持数组形式（仅指定 prop 名）和对象形式（支持类型、默认值、必填及校验），配合 TypeScript 可提升类型安全，且 props 天然响应式，子组件不可直接修改。

defineProps 是 Vue3 中声明子组件接收父组件传值的核心方式，写在 `<script setup>` 里，不需要 import，直接调用就能定义 props 接口。</script>

基础写法：数组形式（适合简单场景）

只关心 prop 名字、不关心类型或默认值时可用。它等价于“白名单”，告诉组件“只接收这几个字段”。

• 语法简洁：`const props = defineProps(['title', 'desc'])`
• 模板中直接使用：`{{ props.title }}` 或解构后 `const { title, desc } = props`
• 注意：无法设置类型校验、默认值或必填规则，适合快速原型或内部小组件

推荐写法：对象形式（支持类型与校验）

更健壮、更适合生产环境，尤其配合 TypeScript 时能提前捕获错误。

python-flask-vue-creator

创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。

下载

• 指定类型：`type: String`、`type: Number`、`type: Boolean`、`type: Object`、`type: Array` 等
• 设默认值：`default: '默认标题'`（函数形式用于引用类型，如 `default: () => []`）
• 标记必填：`required: true`，父组件未传会警告
• 自定义验证：`validator: (val) => val > 0`，返回布尔值

搭配响应式与 TypeScript 的常见模式

Vue3 的 props 天然响应式，无需用 ref 包裹；配合 TS 可进一步提升安全性。

立即学习“前端免费学习笔记（深入）”；

• TS 接口 + defineProps：先定义接口，再传入泛型，类型推导更准
  <script setup lang="ts"><br> interface Props {<br> name: string;<br> age?: number;<br> tags: string[];<br> }<br> const props = defineProps<Props>();<br> </script>
• props 修改限制：子组件不能直接改 props（会报警告），如需修改应通过 emit 通知父组件，或用 `v-model` 语法糖
• 解构需谨慎：直接 `const { title } = props` 会丢失响应性，要用 `toRefs(props)` 或 `computed` 包装

父组件怎么传才生效

父组件传值必须用 `v-bind`（即 `:`），否则是静态字符串。

• 静态传：`` → title 是字符串字面量
• 动态传：`` → 绑定响应式变量
• 传对象/数组：``，子组件 props 类型需匹配（如 `type: Object as PropType`）