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

教案课程名称Vue前端框架设计学时2序号17授课班级日期任课教师课题子任务4：使用组件实现“网上求职”功能-父传子学习目标1.掌握Vue局部组件和全局组件的综合用法2.掌握父传子组件通信的实现逻辑3.培养规范编程习惯、团队协作能力及软件项目精益求精的工匠精神学习内容1.局部组件定义、全局组件注册的基本语法及使用场景差异2.父传子组件通信的核心原理（props属性传递）及代码实现3.局部组件在“网上求职”功能中的复用逻辑设计学习重难点重点：1.局部组件与全局组件的语法规则及综合使用2.父传子通信中props的定义、传递及接收逻辑3.局部组件在“网上求职”功能中的复用实现难点：1.区分局部组件与全局组件的适用场景2.父传子通信中数据类型校验与异常处理项目/任务1.基于Vue创建“网上求职”基础页面框架，包含“职位列表”局部组件2.通过父传子通信实现“职位数据”从父组件向“职位列表”子组件传递教学资源准备课件、PPT、在线课程、教案

教学过程步骤教师活动学生活动时间1.课程导入1.结合“网上求职”平台的实际应用场景（如BOSS直聘、智联招聘），说明组件化开发对降低代码冗余、提升功能迭代效率的作用，强调技术需服务于实际业务需求的责任意识2.提出“网上求职”功能开发需求：搭建基础页面框架，实现职位数据传递与组件复用1.思考组件化开发与实际业务的关联，建立“技术服务场景”的认知2.根据需求拆解开发任务，明确局部组件创建、父传子通信的核心目标20分钟2.知识点讲解1.局部组件定义（components选项）、全局组件注册（Vponent）及父传子通信（props定义与数据传递）的规范代码2.强调代码命名、注释、格式的规范性，避免因代码混乱导致的后续维护问题思政融合点：以“规范编码”引导学生树立职业素养，呼应“工匠精神”中“严谨细致”的核心要求1.跟随演示实操，记录局部组件、全局组件及父传子通信的关键步骤2.按照规范编写代码，初步实现“职位列表”组件的父传子数据传递25分钟3.实践操作1.巡视检查学生成果，针对共性问题（如props未定义数据类型、全局组件注册顺序错误）集中讲解2.引导学生以“网上求职”功能可用性为标准，分组排查程序缺陷（如组件复用数据重复、父传子数据未渲染）1.分组讨论程序缺陷，记录问题点（如“职位列表未显示完整职位信息”“复用的求职者组件数据一致”）2.跨组交流问题排查思路，尝试初步解决简单缺陷25分钟4.总结归纳1.梳理需优化的核心点：局部组件复用逻辑完善（通过props动态传递不同求职者数据）、父传子数据类型校验（添加props类型限制）2.演示优化后的完整代码，强调“迭代优化是软件开发的核心流程”1.记录优化思路与代码细节，完善自身程序2.理解“迭代优化”的重要性，建立“不满足于功能实现，追求功能完善”的开发思维20分钟教学反思1.对局部组件与全局组件的适用场景区分讲解不足，部分学生在“网上求职”功能中滥用全局组件，导致代码冗余，后续需结合业务场景增加“组件选型”专项练习2.实践成果评价以“功能实现”为主，未关注学生代码规范性、优化思路的创新性，后续需补充“代码规范评分项”“优化方案加分项”，完善多元评价体系教案课程名称Vue前端框架设计学时2序号18授课班级软件本2401-2406日期2025.11.18任课教师丁莉高欢课题子任务4：使用组件实现“网上求职”功能-子传父学习目标1.掌握Vue局部组件和全局组件的综合运用技巧2.掌握子传父组件通信的多种实现方式（$emit、.sync修饰符）3.培养问题分析能力、跨组件协作思维及对软件功能完整性的责任意识学习内容1.父组件监听子组件事件的核心原理（自定义事件绑定）2.子传父通信的两种核心方式：$emit触发自定义事件、.sync修饰符实现双向绑定3.“网上求职”功能中子传父通信的场景应用学习重难点重点： 父子通信难点：emit触发自定义事件实现子传父的代码逻辑项目/任务在“网上求职”功能中，通过$emit实现“求职者选择岗位”功能教学资源准备课件、PPT、在线课程、教案

教案教学过程步骤教师活动学生活动时间1．课程导入1.回顾“网上求职”功能-1的成果，提出功能闭环需求：“求职者提交简历后，父组件需接收数据并展示；职位收藏状态修改后，父组件需实时同步”，说明子传父通信是实现功能闭环的关键2.结合“用户使用体验”，强调子传父通信中“数据准确、同步及时”的重要性思政融合点：以“功能闭环”“用户体验”引导学生树立“以用户为中心”的开发理念，培养对软件功能完整性的责任意识1.理解子传父通信在“网上求职”功能中的核心作用2.拆解“简历提交”“收藏状态同步”的子传父实现目标，梳理数据传递逻辑20分钟2．知识点讲解教师讲解购物车基本功能，并演示子传父的使用方法1.跟随演示实操，分别实现“简历提交”“收藏状态同步”功能2.记录两种子传父方式的代码差异与适用场景，标注关键注意点（如$emit事件名大小写、.sync的update前缀）25分钟3．实践操作1.巡视指导学生实操，针对典型问题（如$emit事件名不匹配、.sync未加update前缀）进行针对性讲解2.引导学生以“功能可用、数据准确、体验流畅”为标准，分组排查程序缺陷（如简历数据传递缺失、收藏状态同步延迟）1.分组测试功能，记录缺陷（如“提交简历后父组件未显示数据”“收藏状态修改后需刷新页面才更新”）2.结合课堂笔记，尝试自主解决缺陷，无法解决的问题汇总反馈25分钟4．总结归纳1.梳理共性缺陷的解决方案，演示优化后的完整代码（如添加$emit事件名校验、调整.sync更新时机）2.强调“软件功能需兼顾可用性与用户体验，持续优化是核心”1.根据优化方案完善自身代码，验证功能完整性2.总结子传父通信的核心要点，形成知识框架20分钟教学反思1.对子传父通信的原理讲解较浅，部分学生仅能机械套用代码，无法