Vue 3前端框架应用项目教程（微课版）教案8

教案课程名称Vue前端框架设计学时2序号15授课班级日期任课教师课题任务4.构建Vue组件学习目标1.理解局部组件的定义、注册及使用逻辑，能独立创建基础局部组件；2.清晰区分全局组件与局部组件的注册范围、使用场景及优缺点，可根据需求选择适配组件类型；3.明确组件中data的“函数式”特性及原理，避免数据污染问题；4.能综合运用局部组件知识开发计数器功能，实现“加/减/重置”交互，培养逻辑思维与实战能力。学习内容1.局部组件：定义语法、注册步骤、使用方式；2.全局组件与局部组件对比：注册范围、使用场景、优缺点；3.组件常用写法：选项式API对象写法、选项式API单文件组件（.vue）、组合式API（setup语法糖）；4.组件中的data：函数式返回原因、与Vue实例data的区别。学习重难点重点：1.局部组件的注册与使用；2.全局组件与局部组件的核心区别；3.组件中data的函数式特性。难点：组件数据隔离的原理（为何data必须是函数）；项目/任务子任务2：创建计数器局部组件教学资源准备课件、PPT、在线课程、教案教学过程步骤教师活动学生活动时间1课程导入与回顾：（1）提问：1）Vue框架的核心思想是什么？（组件化、数据驱动）2）为何需要将页面拆分为组件？（复用、解耦、易维护）思考并回答问题，回顾Vue核心思想。5分钟2提出任务：创建计数器局部组件知识讲解：局部组件的定义与使用（1）演示局部组件“三步流程”：定义组件对象→在父组件中注册→模板中使用；（2）示例：创建“UserCard”组件，包含姓名、头像、邮箱信息；（3）强调：局部组件仅在注册它的父组件内可用（1）跟随演示代码，理解局部组件注册逻辑；（2）模仿编写“UserCard”组件，在页面中渲染，验证使用范围。15分钟3知识讲解：全局组件与局部组件对比

（1）演示全局组件注册，对比局部组件注册语法；（2）用表格梳理两者在“注册范围”“使用场景”“优缺点”的差异（如全局组件适合通用组件，局部组件适合页面专属组件）；（3）案例：全局注册“GlobalButton”，局部注册“LocalButton”，测试跨组件使用效果。（1）记录对比表格，明确两者适用场景；（2）分别注册全局/局部按钮组件，测试使用限制，加深理解。15分钟4知识讲解：组件的3种常用写法（1）逐一演示：1）选项式API对象写法（在Vue实例内定义components）；2）选项式API单文件组件（创建.vue文件，拆分template/script/style）；3）组合式API（setup语法糖，定义响应式数据与方法）；（2）对比3种写法的代码结构与适用场景如单文件组件适合大型项目，组合式API适合复杂逻辑（1）跟随老师编写3种写法的“GoodsItem”组件；（2）对比代码差异，记录每种写法的适用场景15分钟5讲解子任务4：组件中的data（1）提问：为何组件的data必须是函数，而Vue实例的data可以是对象？（2）演示“反例”：组件data用对象写法，多次复用组件导致数据同步修改；（3）原理讲解：函数每次返回新对象，实现组件实例间数据隔离；（1）思考问题，观察“反例”中数据污染现象；（2）理解数据隔离原理，修改代码为函数式data，验证效果15分钟6任务实施：创建计数器局部组件（1）明确需求：实现“当前数值显示+加1按钮+减1按钮+重置按钮”，数值不能小于0；（2）拆分实现步骤：template结构设计→script逻辑（响应式数据、加/减/重置方法）→style样式优化；（3）强调：组件内逻辑封装，不依赖外部数据（4）编写代码（1）理解需求，梳理实现思路；（2）绘制简单流程图，明确结构与逻辑的关联（3）跟随分步编写代码，每完成一步预览效果；（4）遇到问题及时提问，调试代码直至实现完整功能20分钟7归纳总结：（1）局部组件流程（2）全局vs局部区别（3）组件的三种写法（4）data函数特性（1）记录知识点框架，查漏补缺；（2）提出未解决的问题，明确知识盲区5分钟教学反思大部分学生能掌握局部组件的注册与使用，完成基础计数器功能，但在“组合式API响应式数据”（如ref与reactive区别）、“组件间通信”（如全局组件控制多个局部组件）存在。

教案课程名称Vue前端框架设计学时2序号16授课班级软件本2401-2406日期2025.11.11任课教师丁莉高欢课题任务4.构建Vue组件学习目标1.理解组件间的3种核心关系（父子、兄弟、跨级），能识别项目中组件的层级结构；

2.掌握父子组件的定义、创建及关联逻辑，明确父组件与子组件的依赖关系；3.精通父组件向子组件传递数据的“props”语法（定义、传递、校验），避免数据传递错误；4.能综合运用组件关系与父子通信知识，开发“购物车”核心功能（商品列表展示、数量显示、总价计算），提升实战开发能力。学习内容1.组件间的关系：父子组件、兄弟组件、跨级组件及关系示意图；2.父子组件关系：父子组件的创建方式、使用场景、层级识别方法；3.父组件向子组件传递数据：props的基本使用；4.购物车功能实现价。学习重难点重点：1.父子组件的创建与关联逻辑；2.props的基本使用与数据传递流程；3.购物车组件拆分与父传子数据实现。难点：1.组件层级结构的识别与复杂场景下的关系判断

2.props校验规则的灵活运用项目/任务子任务3：使用组件实现“购物车”功能教学资源准备课件、PPT、在线课程、教案

教案教学过程步骤教师活动学生活动时间1复习提问：1）上节课创建的计数器组件，若需在页面中同时展示“用户信息”和“计数器”，两者属于什么关系？2）父组件如何将商品数据传递给商品列表中的子组件？思考问题，结合上节课知识尝试回答5分钟2提出任务：使用组件实现“购物车”功能讲解并演示：组件间的关系（1）展示组件关系示意图，讲解3种核心关系：父子组件、兄弟组件、跨级组件（2）发放组件关系图模板，指导绘制页面组件关系（1）理解不同组件关系的定义与场景；（2）完成组件关系图，标注各组件间关系15分钟3讲解并演示：父子组件关系（1）演示父子组件创建流程：1）定义“Child”子组件2）在“Parent”父组件中注册“Child”3）在父组件模板中使用<Child/>标签（2）强调：子组件仅能在注册它的父组件内使用，体现层级依赖动手实践：（1）跟随演示编写父、子组件代码；（2）测试子组件在父组件外的使用限制，验证父子关联逻辑15分钟4讲解并演示：父组件向子组件传递数据（Props）（1）分步骤演示Props使用：1)父组件：通过“属性绑定”传递数据（如:user="userInfo"）；2)子组件：通过props选项接收数据（如props:['user']）3)子组件：在模板中使用接收的props数据；（2）讲解Props校验：演示类型校验（如props:{age:Number}）、必填校验（required:true）、默认值（default:'未知'）；（3）强调：Props是只读的，不可在子组件中直接修改动手实践：（1）编写代码实现“用户信息”传递与渲染；（2）添加Props校验，故意传递错误类型数据，观察控制台报错；（3）尝试修改Props数据，理解只读特性20分钟5（1）明确购物车核心需求：展示商品列表（名称、单价、数量）、计算并显示购物车总价；（2）拆分组件：1）Cart（父组件）：存储商品列表数据、计算总价；2）CartItem（子组件）：接收单个商品数据、渲染商品信息；

（3）绘制购物车组件层级图，明确父传子数据流向（Cart的goodsList→CartItem的goods）（1）理解购物车需求与组件拆分逻辑；（2）记录组件层级与数据流向，梳理实现思路10分钟6分步演示：1.父组件（Cart）2.父组件注册并使用CartItem，通过v-for循环渲染所有商品，传递单个商品数据3.子组件（CartItem）：通过props接收goods并校验，在模板中渲染商品信息；4.父组件（Cart）：通过computed计算属性，遍历goodsList计算总价巡回指导，解决学生问题动手实践：（1）跟随编写代码，每完成一步预览效果；（2）调试代码，确保商品正常渲染、总价计算正确；（3）遇到问题及时提问，完善功能实现20分