StencilJs 学习之事件

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

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

Event 装饰器

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

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

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

...
export class TodoList {
   

  @Event() todoCompleted: EventEmitter<Todo>;

  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<Todo>) {
   
    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<Todo>;

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

常规使用

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

结束语

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

相关文章
|
缓存 前端开发 JavaScript
一看就懂的gulp操作指南:让前端工作变得更加轻松(一)
一看就懂的gulp操作指南:让前端工作变得更加轻松
|
Go
golang run时报undefined错误【已解决】
golang run时报undefined错误【已解决】
3699 0
golang run时报undefined错误【已解决】
|
缓存 资源调度 持续交付
在清空NPM缓存后,检查是否所有依赖都已正确安装
在清空NPM缓存后,检查是否所有依赖都已正确安装
|
缓存 JavaScript
vue 页面缓存 keep-alive(含配置清除页面缓存 exclude,局部缓存,动态缓存,路由控制缓存 $route.meta.keepAlive)
vue 页面缓存 keep-alive(含配置清除页面缓存 exclude,局部缓存,动态缓存,路由控制缓存 $route.meta.keepAlive)
1284 0
|
存储 缓存 安全
史上最易懂的Go语言map完全指南
史上最易懂的Go语言map完全指南
570 0
|
存储 监控 前端开发
前端知识笔记(五)———前端密钥怎么存储,才最安全?
前端知识笔记(五)———前端密钥怎么存储,才最安全?
2439 0
腾讯 Matrix 增量编译 bug 解决,PR 已被官方采访(二)
腾讯 Matrix 增量编译 bug 解决,PR 已被官方采访
|
12天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1253 5
|
1天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
11天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1274 87