《Vue企业开发实战》电子教案18-props传递数据

《网站开发技术（VUE）》·教案18第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目7组件详解授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目7的任务2。掌握props/defineProps与单向数据流，完成移动端标题栏上机：同一组件传入不同标题。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务2props传递数据基本用法；defineProps；单向数据流；上机—移动端标题栏教材7.2三、学情分析学生已能复用组件，但两处标题只能写死在子组件里。本课要求会声明props、会传入、明白子组件不能直接改props。四、教学目标（一）知识目标1.掌握props的声明与使用。2.理解单向数据流：父改数据，子只读展示。3.了解defineProps的基本写法。（二）能力目标1.能给标题栏组件声明title等props。2.能在父组件传入不同文案得到不同标题。3.能说明为何不要在子组件里赋值修改props。（三）素质目标1.培养复用共享和团队协作意识。2.遵守单向数据流，不在子组件里擅自改props。3.养成规范操作、爱护设备的习惯。五、教学重点与难点类型内容突破办法重点props声明与传入对照父模板属性与子defineProps难点单向数据流故意在子里改props看警告，再改为自定义事件思路（下次展开）六、教学方法与准备方法：任务驱动、标题栏案例、理实一体。导入用“同一标题栏，详情页和选座页文字不同”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入打开上次抽的标题栏。提问：详情页要写“演出详情”、选座页要写“选座”，能否不复制组件？引出props。说出希望传入的字段。用同一组件不同数据定义本课。明确学习目标出示目标：会传、会声明、遵守单向流。对照目标勾画。用两页不同标题当达标。任务2props讲解演示父传字符串/对象、子defineProps、模板中使用。强调单向流：显示用props，要改回去得发事件。点明类型与默认值可写可不写，本课先会传。跟写titleprops。先跑通再讲约束。上机练习按教材完成移动端标题栏：左侧返回、中间标题由props控制。两处父页面传入不同title。独立完成并切换页面验证。项目7的关键合格证据之一。小结与作业回扣：父传子用props。预告子向父要用自定义事件。保存标题栏组件。补齐通信的另一半。课堂检测：①props在谁里面声明？②父组件如何传入？③子组件能否直接修改props？八、上机任务与评价练习任务要求合格标准常见问题上机1标题栏用props显示不同title两处父页面标题不同且来自传入值写死在子组件、未defineProps上机2验证单向数据流（子内修改会出问题或警告）能口述原因并改回只读展示仍然v-model直接绑props过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述单向数据流。2.为票务卡片列出至少三个应做成props的字段。书面作业：写出标题栏组件的props清单；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：____________________________________