《Vue企业开发实战》电子教案20-slot分发内容

《网站开发技术（VUE）》·教案20第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目7组件详解授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目7的任务4。掌握slot内容分发，能用匿名slot和具名slot定制组件中间区域，达到带props/emits/slot的可复用组件合格标准。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务4slot分发内容slot是什么；匿名slot；具名slot；在标题栏/卡片中的应用教材7.4三、学情分析学生已会传数据和事件，但标题栏右侧有时要搜索、有时要更多按钮，写死在子组件会爆炸。本课要求会slot，能让父决定插入什么。四、教学目标（一）知识目标1.理解slot是父组件向子组件指定位置填内容。2.掌握匿名slot与具名slot。3.能说明slot与props在适用上的差别。（二）能力目标1.能在布局组件中放置slot出口。2.能在父组件填入按钮、文字或图标。3.能用具名slot区分左中右等区域。（三）素质目标1.培养复用共享和团队协作意识。2.遵守单向数据流，不在子组件里擅自改props。3.养成规范操作、爱护设备的习惯。五、教学重点与难点类型内容突破办法重点匿名slot与具名slot标题栏右侧插不同按钮难点slot与props怎么选“一段结构”用slot，“一个值”用props六、教学方法与准备方法：布局案例、填空对比、理实一体。导入用“右边有时是搜索有时是分享”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入同一标题栏右侧需求不同。提问：都做成props好不好？引出slot。举例还可能插入什么。用结构差异而不是字符串差异定义问题。明确学习目标出示目标：会匿名、会具名，组件可定制内容。对照目标勾画。对准课标“可复用组件”合格线。任务4slot讲解讲默认slot像一个洞。演示父写入按钮。具名slot把洞标上名字。对比props只传值。跟写header/footer具名槽。先洞后名字，降低抽象。上机练习改造标题栏或卡片：中间或右侧用slot；两处父页面插入不同内容。综合检查props+emit+slot都在。完成可定制布局并演示两处差异。项目7综合达标。小结与作业回扣三件套：props、emit、slot。预告计算属性把模板里的算式搬出去。保存组件。转向派生数据。课堂检测：①slot解决什么问题？②具名slot如何对应？③一段HTML结构更适合props还是slot？八、上机任务与评价练习任务要求合格标准常见问题上机1为布局组件添加匿名或默认slot并在父中填入内容父写入的内容出现在预定位置未写slot出口、插错层级上机2使用具名slot区分至少两个区域左右/主次内容互不串位name写错、忘记v-slot过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.完成教材作业：用本章组件技术改写指定页面模块。2.说明匿名slot与具名slot的选用。书面作业：列出本课组件的props、事件、slot清单；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：___________________________________