《Vue企业开发实战》电子教案18_props传递数据.docxVIP

《网站开发技术（VUE）》·教案18

第PAGE页

一、基本信息

课程名称

网站开发技术（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.养成规范操作、爱护