《Vue企业开发实战》电子教案19-组件通信

《网站开发技术（VUE）》·教案19第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目7组件详解授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目7的任务3。掌握自定义事件与defineEmits，了解兄弟通信的处理思路，能完成子向父回传（如标题栏返回、卡片购买）。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务3组件通信自定义事件；defineEmits；子向父；兄弟通信的常见处理方式教材7.3三、学情分析学生已会父传子，但点击子组件按钮后父页面不会跳转或改数据。本课要求会emit，能说明兄弟之间通常经父组件或后续Pinia中转。四、教学目标（一）知识目标1.掌握自定义事件的触发与监听。2.理解defineEmits的作用。3.了解兄弟通信不宜直接互改，而应经过共同的父级或状态管理。（二）能力目标1.能在子组件点击时emit事件。2.能在父组件监听并执行跳转或改数据。3.能画出父子、兄弟通信的简图。（三）素质目标1.培养复用共享和团队协作意识。2.遵守单向数据流，不在子组件里擅自改props。3.养成规范操作、爱护设备的习惯。五、教学重点与难点类型内容突破办法重点emit与父监听标题栏返回按钮触发父级router.back难点兄弟如何同步画“兄→父→弟”，不引入过多新API六、教学方法与准备方法：场景驱动、事件对照、理实一体。导入用“子组件里的返回按钮点了没反应”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入点标题栏返回，若逻辑写在子组件里乱跳或无效。提问：谁才知道该回哪一页？引出子通知父。讨论返回职责在哪一层。用职责划分引出事件。明确学习目标出示目标：子会发、父会听，兄弟走父级。对照目标勾画。避免把所有逻辑塞进子组件。任务3通信讲解演示defineEmits、emit('back')、父@back。卡片emit('buy',id)。讲兄弟通信经父组件中转，点明跨多层或全局数据可留到Pinia。画通信箭头。跟写返回事件。先父子跑通，兄弟只建立正确模型。上机练习标题栏返回emit由父处理；卡片或按钮把id传给父。可选：两个子组件经父显示同一选中项。点击后父级有可见变化。用交互验证通信。小结与作业回扣：props向下，事件向上。预告slot让父决定中间掏空的那一块。保存事件接口。补齐内容分发。课堂检测：①子向父用什么？②emit的第一个参数是什么？③两个兄弟如何同步一个选中id？八、上机任务与评价练习任务要求合格标准常见问题上机1子组件emit，父组件监听并处理点击后父级跳转或数据变化事件名不一致、未defineEmits上机2向父传递id或对象载荷父能收到并用于展示或跳转载荷未传、父未解构过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.画出父子通信方向并标注props与事件。2.说明兄弟通信为什么通常不互相直接引用。书面作业：为购买按钮设计事件名与载荷；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：_____________________________________