组件可以使用Event Emitter装饰器发送数据和事件。
Event 定义
参考：import { Event, EventEmitter } from ‘@stencil/core‘;...export class TodoList { ?@Event() todoCompleted: EventEmitter; ?todoCompletedHandler(todo: Todo) { ???this.todoCompleted.emit(todo); ?}}监听事件（Listen）
可以监听，特定元素的事件
参考：import { Listen } from ‘@stencil/core‘;...export class TodoApp { ?@Listen(‘todoCompleted‘) ?todoCompletedHandler(event: CustomEvent) { ???console.log(‘Received the custom todoCompleted event: ‘, event.detail); ?}}监听键盘事件
@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‘);}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>参考例子
- 子组件
import { Component,Event,EventEmitter, State} from ‘@stencil/core‘;@Component({ ?tag: ‘my-child-component‘, ?styleUrl: ‘my-child-component.css‘, ?shadow: false, ?scoped: false})export class MyChildComponent { ?@Event() userClickEvent: EventEmitter; ?UserClickHandler() { ???this.userClickEvent.emit({name:"dalong",age:44}); ?} ?@State() name:String="demoapp" ?render(){ ???return ( ?????<div> ???????<p onClick={_=>this.UserClickHandler()}>click</p> ???????<p>child component</p> ?????</div> ???); ?}}- 父组件
import { Component,State, Prop} from ‘@stencil/core‘;@Component({ ?tag: ‘my-component‘, ?styleUrl: ‘my-component.css‘, ?shadow: false,})export class MyComponent { ?// @Listen("userClickEvent") ?// getUserClickEvent(event: CustomEvent){ ?// this.name=JSON.stringify(event.detail) ?// } ?something(event:CustomEvent){ ???this.name=JSON.stringify(event.detail) ?} ?@State() name:String="first info" ?@Prop() UserID:String="rong" ?render() { ???return ( ?????<div > ???????<p>{this.UserID}</p> ???????<p>{this.name}</p> ???????<my-child-component onUserClickEvent={env=>this.something(env)}></my-child-component> ?????</div> ???); ?}}- 事件绑定
使用Listen@Listen("userClickEvent") ?getUserClickEvent(event: CustomEvent){ ??this.name=JSON.stringify(event.detail)}使用jsx 绑定：<my-child-component onUserClickEvent={env=>this.something(env)}></my-child-component>something(event:CustomEvent){ ???this.name=JSON.stringify(event.detail) }参考资料
https://stenciljs.com/docs/events
stenciljs 学习五 事件
原文地址：https://www.cnblogs.com/rongfengliang/p/9710668.html