上一篇介绍了 Aura Framework 中 Component 类的部分方法, 本篇将要介绍 Event 常用的方法.
1. setParam(String key , Object value): 设置事件的 param, 此项设置不会修改已经被触发的事件. 我们在创建事件的时候可以同时声明 attribute, 在我们 fire 事件以前, 可以对这些 attribute 设置值, 其中 key 为 attribute 的 name,value 部分即为 attribute 的 value.
2.setParams(Object config): 设置一组事件的 param 键值对. 参数格式类似于 {param1:value1 , param2:value2}.
3.fire(Object params): 触发事件, params 是可选项, 如果 params 设置了键值对, 则这里的键值对则会覆盖原有的键值对.
4.getParam(String name): 获取 params 中指定 name 对应的 value 值. event fire 以后, 在对应的 handler 中可以通过 getParam 获取相关 param 的 value 值.
5.getParams(): 获取 params 的所有键值对的集合.
6.getEventType(): 获取事件类型, COMPONENT/APPLICATION.
7.getName(): 获取注册的事件的名称.<aura:registerEvent name="TestEvent" type="c:TestComponentEvent"/> , 则此方法返回 TestEvent
8.getSource(): 获取事件对应的事件源. 事件操作主要分成三部分, 事件源, 事件, 事件 handler. 通过事件可以获取到对应的数据源.
9.getPhase(): 获取事件阶段. capture/bubble/default.
10.getType(): 获取注册事件的类型.<aura:registerEvent name="TestEvent" type="c:TestComponentEvent"/> , 则此方法返回 c:TestComponentEvent
11.pause(): 暂停事件触发, 当调用 resume 方法后才会继续进行事件触发的执行.
12.resume(): 继续进行事件触发的执行.
13.stopPropagation(): 设置事件是否可以冒泡. 调用此方法后将会停止后续的事件阶段的执行.
其他方法或者上面方法的详细描述可以自行查看 Event 类的方法介绍. 下面进行简单的 demo.
1.TestComponentEvent.evt: 创建一个 Component 类型的事件, 包含两个 String 类型的参数;
- <aura:event type="COMPONENT" description="test component event">
- <aura:attribute name="testAttribute1" type="String"/>
- <aura:attribute name="testAttribute2" type="String"/>
- </aura:event>
2.TestComponent.cmp: 创建一个 Component, 注册此事件并设置此事件对应的 handler, 在 init 函数中触发此事件;
- <aura:component>
- <aura:registerEvent name="TestComponentEvent" type="c:TestComponentEvent"/>
- <aura:handler name="TestComponentEvent" action="{!c.testComponentHandler}"/>
- <aura:attribute name="testA1" type="String"/>
- <aura:attribute name="testA2" type="String"/>
- <aura:handler name="init" value="{!this}" action="{!c.initHandler}"/>
- {!v.testA1 + v.testA2}
- </aura:component>
3.TestComponentController.JS : init 函数中触发事件, 触发事件设置相关的 attribute 值以及打印出相关的属性
- ({
- initHandler : function(component, event, helper) {
- var testEvent = component.getEvent('TestComponentEvent');
- testEvent.setParam('testAttribute1','test value 1');
- testEvent.setParam('testAttribute2','test value 2');
- testEvent.fire({'testAttribute1' : 'test value 1 updated'});
- },
- testComponentHandler : function(component,event,helper) {
- component.set('v.testA1', event.getParam('testAttribute1'));
- component.set('v.testA2',event.getParam('testAttribute2'));
- console.log('type :' + event.getType());
- console.log('event phase :' + event.getPhase());
- console.log('event name :' + event.getName());
- console.log('event params :' + event.getParams());
- console.log('event param 1 :' + event.getParam('testAttribute1'));
- console.log('event type :' + event.getEventType());
- }
- })
结果展示:
总结: 此篇主要介绍了一些 Event 类常用的方法, 详情可以自行参看官方提供的文档. 篇中有问题的欢迎指出, 有不懂得欢迎留言.
来源: https://www.cnblogs.com/zero-zyq/p/9966798.html