stenciljs 学习五事件

Posted 2021-01-08 rongfengliang-荣锋亮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了stenciljs 学习五事件相关的知识，希望对你有一定的参考价值。

组件可以使用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)
 }