props 传递待办事项列表数据的核心是父组件定义数据→绑定到子组件→子组件接收展示，单向显式可追踪；父组件用 v-for 逐项传 item，子组件用 defineprops 声明类型并响应式使用，通过事件通知父组件更新状态。

用 Props 传递待办事项列表数据，核心就是“父组件定义数据 → 绑定到子组件 → 子组件接收并展示”。整个过程是单向、显式、可追踪的，不需要额外状态管理，适合列表类场景。

父组件准备数据并循环渲染子组件

在父组件（比如 TodoList.vue）中，用数组维护待办事项，每个对象至少含 id、text、done 字段。然后用 v-for 遍历，把每一项作为 prop 传给子组件：

• 确保每项有唯一 key（推荐用 item.id）
• 用 :item="item" 或 v-bind:item="item" 动态绑定，让子组件能响应父组件的数据更新
• 不要直接把整个列表传过去——那是“批量传”，而实际需要的是“逐项传”，更利于复用和隔离

子组件正确声明并使用 Props

在子组件（比如 TodoItem.vue）中，通过 defineProps 明确接收结构：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 用对象形式声明，指定类型和必要性：id: { type: Number, required: true }
• text 和 done 同样做类型约束，比如 text: String、done: Boolean
• 模板里直接插值使用：{{ item.text }}，或加样式判断：:class="{ 'completed': item.done }"

注意 props 是只读的，别在子组件里直接修改

Vue 会警告你修改 props——这不是 bug，而是设计原则。如果子组件需要变更完成状态，应该：

• 触发自定义事件（如 update:done 或 toggle）
• 由父组件监听后更新原始数据（比如 listData[index].done = !listData[index].done）
• 这样既保持数据流清晰，又避免子组件意外污染父状态

调试小技巧：加 console.log 看数据流向

开发时可在关键位置加日志，快速确认是否传到位：

• 父组件 v-for 循环内：console.log('正在渲染第', index, '项:', item)
• 子组件 setup 中：console.log('收到 props:', props.item)
• 配合 Vue Devtools 查看组件实例的 props 面板，比日志更直观

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！