StencilJs学习之事件

感觉之手

其实并没有所谓的 stencil Event，相反 stencil 鼓励使用 DOM event。然而，Stencil 提供了一个 API 来指定组件可以触发的事件，以及组件监听的事件。 这是通过 Event()和 Listen()装饰器实现的。
Event 装饰器

组件可以使用事件发射器装饰器发送数据和事件。
要将自定义 DOM 事件分发给其他组件处理，可以使用@Event()装饰器。

1. import { Event, EventEmitter } from '@stencil/core';
3. ...
4. export class TodoList {
6.   @Event() todoCompleted: EventEmitter<Todo>;
8.   todoCompletedHandler(todo: Todo) {
9.     this.todoCompleted.emit(todo);
10.   }
11. }

复制代码

上面的代码将 dispatch 一个名为 todoCompleted 的自定义 DOM 事件。
EventOptions

1. interface EventOptions {
2.     /**
3.      * 自定义事件名称
4.      */
5.     eventName?: string;
6.     /**
7.      * 表明事件是否允许冒泡
8.      */
9.     bubbles?: boolean;
11.     /**
12.      * 表明事件是否允许取消
13.      */
14.     cancelable?: boolean;
16.     /**
17.      * 表示事件是否可以跨越shadow DOM和regular DOM的边界
18.      */
19.     composed?: boolean;
20. }

复制代码

Listen 装饰器

Listen() 装饰器用于监听 DOM 事件，包括从 @Events 分发的事件。当组件从 DOM 中添加或删除时，事件监听器会自动添加或删除。
在下面的示例中，假设子组件 TodoList 使用 EventEmitter 触发 todoCompleted 事件。

1. import { Listen } from '@stencil/core';
3. ...
4. export class TodoApp {
6.   @Listen('todoCompleted')
7.   todoCompletedHandler(event: CustomEvent<Todo>) {
8.     console.log('Received the custom todoCompleted event: ', event.detail);
9.   }
10. }

复制代码

ListenOptions

1. interface ListenOptions {
2.     target?: "body" | "document" | "window"; // 如果target属性不设置值，则默认监听host（宿主元素）
3.     capture?: boolean;
4.     passive?: boolean;
5. }

复制代码

使用组件的自定义事件

在 jsx 中使用

1. // 在stencilJs项目内使用import { Event, EventEmitter } from '@stencil/core';
3. ...
4. export class TodoList {
6.   @Event() todoCompleted: EventEmitter<Todo>;
8.   todoCompletedHandler(todo: Todo) {
9.     this.todoCompleted.emit(todo);
10.   }
11. }

复制代码

常规使用

[code][/code]结束语

至此，我们已经基本把 StencilJs 的相关基础知识已经学习的差不多了，由于 stencilJs 使用的 tsx
来开发的，所以在下一章节中将会学习如何使用 tsx。

来源:https://www.cnblogs.com/guojikun/p/17493166.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！