(尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件:
我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢?
这个时候Vue的自定义事件系统就派得上用场了.
自定义事件知道两件事:
(1).绑定
(2).触发
注意:$on(eventName,回调函数)
==================================================================
之前App.vue和TodoHeader.vue组件之间传递信息靠的是函数的形式
而现在vue自定义事件代替传函数这种形式
现在改成这这种形式:
名字就起回调函数的名字
<!--给TodoHeader标签对象绑定addTodo事件监听-->
以前是调用addTodo函数,现在没有了
现在需要触发事件($emit()),通知addTodo函数去调用
方法://触发自定义事件:addTodo
//触发事件需要指定事件名,还需要指定传递数据
//一触发触发事件,回调函数需要调用addTodo,需要接收todo
this.$emit('addTodo',todo)
===================================================================
第二种方法:使用$on(eventName)监听事件;vue中自己实现的一套机制,用的不多
如:现在只留下,没有传任何参数
但是,TodoHeader.vue中有触发事件
这时,App.vue需要绑定一个监听
mounted(){// 执行异步代码
//给<TodoHeder/>绑定addTodo事件监听
//指定事件名和回调函数
//监听绑定在this上面,this现在指App.vue组件,而现在需要绑定TodoHeader.vue组件,不对
this.$on('addTodo',this.addTodo)//有问题
}
故现在需要找到下面这个标签
header属性指向了<TodoHeader ref="header"/>标签对像
最新文章
- Android中直播视频技术探究之---桌面屏幕视频数据源采集功能分析
- ANTLR3完全参考指南读书笔记[06]
- 简单实用的PHP验证码类
- CentOS 6.4 安装搭建 Scrapy 0.22 环境
- 【HDOJ】1225 Football Score
- Android(java)学习笔记228:服务(service)之绑定服务调用服务里面的方法
- SQL四种语言
- STM32学习笔记(四)——串口控制LED(中断方式)
- 与你们分享我学习linux系统的三大妙招
- python网络爬虫与信息提取 学习笔记day2
- 「JavaScript面向对象编程指南」基础
- 杭电ACM2002--计算球体积
- CentOS 6.5 网络服务器功能的实现②:运用光盘(镜像)制作一个本地yum源
- CMD下进入MYSQL的命令
- 解决Ubuntu中vi命令的编辑模式下不能正常使用方向键和退格键的问题
- 为什么MySQL不推荐使用子查询和join
- Swift5 语言指南(二十) 类型转换
- Mac下配置svn服务器
- Java compiler level does not match the version of the installed Java project facet.解决方法
- mp4文件数据格式解析