【资料图】

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

Event 装饰器

组件可以使用事件发射器装饰器发送数据和事件。

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

import { Event, EventEmitter } from "@stencil/core";...export class TodoList {  @Event() todoCompleted: EventEmitter;  todoCompletedHandler(todo: Todo) {    this.todoCompleted.emit(todo);  }}

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

EventOptions

interface EventOptions {    /**     * 自定义事件名称     */    eventName?: string;    /**     * 表明事件是否允许冒泡     */    bubbles?: boolean;    /**     * 表明事件是否允许取消     */    cancelable?: boolean;    /**     * 表示事件是否可以跨越shadow DOM和regular DOM的边界     */    composed?: boolean;}

Listen 装饰器

Listen()装饰器用于监听 DOM事件，包括从 @Events分发的事件。当组件从 DOM 中添加或删除时，事件监听器会自动添加或删除。

在下面的示例中，假设子组件 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);  }}

ListenOptions

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

使用组件的自定义事件在 jsx 中使用

// 在stencilJs项目内使用import { Event, EventEmitter } from "@stencil/core";...export class TodoList {  @Event() todoCompleted: EventEmitter;  todoCompletedHandler(todo: Todo) {    this.todoCompleted.emit(todo);  }}

常规使用

<script>    const todoListElement = document.querySelector("todo-list");    todoListElement.addEventListener("todoCompleted", (event) => {        /* your listener */    });</script>

结束语

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