Stencil笔记(5)- Events

即发布订阅模式

要自定义事件,可以使用Events装饰器。

import { Event, EventEmitter } from '@stencil/core';

export class TodoList {

  @Event() todoCompleted: EventEmitter;

  todoCompletedHandler(todo: Todo) {
    this.todoCompleted.emit(todo);
  }
}
监听事件

Listen()装饰器用于处理@Events发布的事件。下面的例子中,假设子组件todolist使用eventemitter发出一个todoCompleted事件。

import { Listen } from '@stencil/core';
...
export class TodoApp {

  @Listen('todoCompleted')
  todoCompletedHandler(event: CustomEvent) {
    console.log('Received the custom todoCompleted event: ', event.detail);
  }
}

事件还可以注册到一个具体的元素中,对于整个应用都要监听这个事件时比较有用:

import { Listen } from '@stencil/core';

...
export class TodoList {

  @Listen('body:scroll')
  handleScroll(ev) {
    console.log('the body was scrolled', ev);
  }
}

另外也可以监听键盘事件,得到键码或Stencil提供一些常量。

@Listen('keydown')
handleKeyDown(ev){
  if(ev.keyCode === 40){
    console.log('down arrow pressed')
  }
}

@Listen('keydown.up')
handleUpArrow(ev){
  console.log('will fire when up arrow is pressed');
}

Stencil提供了以下一些常量,通过keydown访问,代表你按下了哪个:
enter
escape(即Esc键)
space(空格键)
tab
left
up
right
down

在JSX中绑定事件:
import { Event, EventEmitter } from '@stencil/core';

...
export class TodoList {

  @Event() todoCompleted: EventEmitter;

  todoCompletedHandler(todo: Todo) {
    this.todoCompleted.emit(todo);
  }
}

// 使用 

<todo-list onTodoCompleted={ev => this.someMethod(ev)}></todo-list>
阅读更多

没有更多推荐了,返回首页