最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
关于vue.js中this.$emit理解使用代码
时间:2022-08-22 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下关于vue.js中this.$emit理解使用代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
一、每个 Vue 实例都实现了事件接口
即:
1、使用 $on(eventName) 监听事件
2、使用 $emit(eventName, optionalPayload) 触发事件
二、注意事项
1、父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件
2、不能用 $on 监听子组件释放的事件,而必须在模板里直接用 v-on 绑定
三、例子及说明
1、父组件代码及说明
{{ total }}
2、子组件代码及说明
3、运行截图
A、开始截图:
B、点击第一个按钮截图(+1)
C、点击第二个按钮截图(+2)
四、总说明
1、首先看子组件件,按钮中给其绑定了方法:incrementCounter;
2、点击button时会执行函数 incrementCounter,increment中有 this.$emit(‘increment1)和this.$emit(‘increment2),看点击的是哪个按钮就执行哪个;
3、当incrementCounter执行时,就会触发自定函数increment1(点击第一个按钮的时候)或者increment(点击第二个按钮的时候),也就是incrementTotal1或者incrementTotal2函数;
-
上一个: Java查看和修改线程优先级操作代码解析
-
下一个: JavaScript封装弹框插件代码方法
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12