前端技术15vue自定义事件_第1页
前端技术15vue自定义事件_第2页
前端技术15vue自定义事件_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

课题第4章Vue事件处理第三节vue自定义事件授课时间第七周教学目的学生能够理解Vue中的按键修饰符的概念和作用。学生能够掌握Vue中常用的按键修饰符。学生能够使用Vue的自定义事件进行实际项目开发。教学重点学生需要掌握Vue中常用的事件监听方式，包括普通方法和修饰符。在实际项目开发中，学生需要能够灵活运用按键修饰符和自定义事件功能进行页面元素的交互操作。教学难点根据项目需求自定义事件。教学过程教学环节教学内容教学方法、手段及时间分配课前复习导入新课讲授内容课堂练习综合练习总结提问内容：Vue中如何绑定事件？（v-on或@）事件修饰符.stop和.prevent的作用是什么？如何在事件处理函数中传递参数和事件对象？目的：复习事件监听的基础知识，为新课做铺垫。导入方式：提问：“在Vue中，父子组件如何通信？”引出：“除了通过props传递数据，我们还可以通过自定义事件实现父子组件通信。今天我们就来学习Vue中的自定义事件。”目的：通过问题引导学生思考，激发学习兴趣。第三节vue自定义事件（本节课调整到组件章节进行讲解）内容大纲：自定义事件的基本概念子组件通过$emit触发事件，父组件通过v-on监听。自定义事件的语法子组件：this.$emit('事件名',参数)。父组件：<ChildComponent@事件名="处理函数"/>。代码示例示例1：子组件触发submit事件，父组件监听并处理。示例2：子组件传递多个参数，父组件接收并显示。教学方法：结合代码示例讲解，边讲边演示。使用Vue开发工具实时展示效果。$emit：用于触发自定义事件，并传递数据给父组件或其他监听该事件的组件。示例：<child-component@custom-event="handleCustomEvent"></child-component>methods:{handleCustomEvent(data){console.log(data);}}$on：用于监听自定义事件，并在事件触发时执行相应的方法。示例：<child-component@custom-event="handleCustomEvent"></child-component>methods:{handleCustomEvent(){console.log('customeventtriggered');}}任务：实现一个父子组件通信：子组件点击按钮，父组件显示消息。子组件传递一个对象给父组件，父组件显示对象内容。方式：学生独立完成，教师巡视指导。任务：结合组件知识，完成一个父子组件传参案例代码编写（注：子组件向父组件传参过程需要借助自定义事件）。练习过程：1.以小组为单位讨论实现方案。2.代码编写。3.提交本次练习视频到极域中。4.教师选择同学进行课堂分享及代码讲解。总结：总结本节课所学知识。第一课时提问（5分钟）导入（5分钟）讲授（25分钟）实操（10分钟）第二课时发布任务（3分钟）练习过程（37分钟）总结（5分钟）

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论