2023学年完整公开课版自定义事件

上传人：尖*** IP属地：安徽上传时间：2023-05-15 格式：PPTX 页数：13 大小：1.36MB 积分：14 举报 版权申诉

已阅读5页，还剩8页未读，继续免费阅读

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

自定义事件

1、理解自定义事件

2、自定义事件应用实例

学习目标

1、了解自定义事件

2、通过实例掌握自定义事件的用法

父组件是使用props传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！使用v-on绑定自定义事件,每个Vue实例都实现了事件接口(Eventsinterface)，即：使用$on(eventName)监听事件使用$emit(eventName)触发事件

理解自定义事件

另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

理解自定义事件

自定义事件应用实例（1）-div部分：

自定义事件应用实例

自定义事件应用实例（2）-自定义事件部分：

自定义事件应用实例

在开发<event-area>组件时，它的一些功能可能要求我们和父级组件进行沟通。

引入一个可访问性的功能来放大博文的字号，同时让页面的其它部分保持默认的字号。在其父组件中，通过添加一个blogFontSize数据属性来支持这个功能：

自定义事件应用实例

在模板中用来控制所有博文的字号：

自定义事件应用实例

接下来添加按钮，点击放大字体。当点击这个按钮时，需要告诉父级组件放大所有博文的文本。

Vue实例提供了一个自定义事件的系统来解决这个问题。父级组件可以像处理nativeDOM（本地DOM）事件一样通过v-on监听子组件实例的任意事件：

自定义事件应用实例

子组件通过调用内建的$emit方法并传入事件名称来触发这个事件：

人人文库> 全部分类> 教育资料 > 辅导培训

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