首页 > 资讯 > > 正文

StencilJs学习之事件 全球实时

2023-06-20 11:12:12 来源：博客园


(资料图片)

其实并没有所谓的 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。

标签：

上一篇：2023江苏泰州市姜堰区招聘教师体检公告 当前头条

下一篇：最后一页
热点聚焦

StencilJs学习之事件 全球实时

其实并没有所谓的stencilEvent，相反stencil鼓励使用`DOMevent`。然而

2023-06-20 11:12:12

2023江苏泰州市姜堰区招聘教师体检公告 当前头条

根据《泰州市姜堰区2023年公开招聘教师公告》有关规定，按岗位招聘计划

2023-06-20 10:54:30

电车大利好！国办最新发文；华为向30家日企收取专利使用费；恒大地产再被执行5.5亿｜早餐-全球微资讯

—国内—01国办：打造城际充电网络，满足电车中长途需求据中国政府网19

2023-06-20 10:34:59

环球关注：颜值拉满的实力派！小折叠首选moto razr 40 Ultra，5699元起

motorazr40Ultra搭载了一块3 6英寸超大外屏，是目前行业最大的小折叠外

2023-06-20 10:11:01

团代表故事丨罗阳女儿罗靓：笑着向烈士父亲告白，却看哭无数人

团代表故事丨罗阳女儿罗靓：笑着向烈士父亲告白，却看哭无数人,罗靓,罗

2023-06-20 10:03:20

夏季最要命的8个细节，每一个都是教训！千万别再做了！

生活中有很多常见小事，可能一个粗心大意就会酿成悲剧，细节关乎生命安

2023-06-20 09:17:20

管理学的理论基础有哪些_管理学理论基础有哪些

大家好，小石来为大家解答以上问题。管理学的理论基础有哪些，管理学理

2023-06-20 08:57:43

三亚市崖州区举行科技工作者代表座谈会暨企业招商推介会

人民网三亚6月19日电(牛良玉)为凝聚广大科技工作者投身到创新驱动发展

2023-06-20 08:25:44

天天即时：装修房子的过程顺序 ，装修的步骤是什么？

装修首先要搞清楚的就是装修步骤是什么？装修的流程是什么？装修的先后

2023-06-20 07:50:24

一船只发生泄漏 超2.5万升燃料流入多瑙河塞尔维亚段 世界时讯

据塞尔维亚媒体当地时间19日报道，塞尔维亚环保部表示，一艘悬挂保加利

2023-06-20 06:45:16

优酷会员账号密码怎么看_优酷会员账号密码

1、优酷会员账号查看步骤如下：一、电脑端登陆优酷，右侧悬浮条里面，

2023-06-20 05:52:21

环球最新：甩葱歌 初音未来（关于甩葱歌 初音未来的基本详情介绍）

1、《IevanPolkka》（中文译名《甩葱歌》）是一首来自芬兰的波尔卡（Po

2023-06-20 04:13:49

当前聚焦：广州深圳旅游心得体会 广州深圳旅游

1、小知己整理一份广州旅游攻略，仅供首次到广州旅游的朋友参考。2、广

2023-06-20 01:20:09

虹桥长途西站具体位置（虹桥长途西站）

导读1、上海虹桥长途汽车站、虹桥长途西站都是位于上海市闵行区虹桥地

2023-06-19 22:52:33

全球今日讯！官井洋野生大黄鱼繁殖水域的资源与环境特征（关于官井洋野生大黄鱼繁殖水域的资源与环境特征介绍）

大家好,小万来为大家解答以上的问题。官井洋野生大黄鱼繁殖水域的资源

2023-06-19 22:16:28

世界观天下！《神界：原罪2》新手开局玩法技巧详解

《神界：原罪2》新手玩家在开局有什么技巧呢，一起看下玩家“邪恶的虎

2023-06-19 21:40:40

彩车开道，锣鼓喧天！看江夏腰鼓队“花式”送考

彩车开道，锣鼓喧天！看江夏腰鼓队“花式”送考---6月19日上午10点许，

2023-06-19 20:39:27

柒月_关于柒月概略-世界新资讯

1、你知道吗？很久很久以前，蜗牛其实是会飞翔的。她的壳，原本是一对

2023-06-19 20:04:40

Apache Doris 1.2.5 版本正式发布！

亲爱的社区小伙伴们，我们很高兴地宣布，ApacheDoris于2023年6月19日迎

2023-06-19 19:38:16

V观财报｜长光华芯：国投创业宁波基金拟减持不超过1.85%

【V观财报｜长光华芯：国投创业宁波基金拟减持不超过1 85%】长光华芯公

2023-06-19 19:07:01

第十四届中国摄影艺术节聚焦以摄影推动文化自信自强 焦点短讯

新华社郑州6月19日电（记者余俊杰）第十四届中国摄影艺术节6月18日在河

2023-06-19 18:21:03

荀老板有多少个小号

文|李德林编辑|德小强荀建华真是个人才啊，高位从亿晶光电套现后，父子

2023-06-19 17:44:40

焦点简讯:阅读链接世界 促进文明互鉴——第二十九届北京国际图书博览会闭幕综述

6月18日，为期四天的第二十九届北京国际图书博览会（以下简称“图博会

2023-06-19 17:15:25

三部门联合发布指导意见惩治网暴，释放何种信号？

三部门联合发布指导意见惩治网暴，释放何种信号？

2023-06-19 16:53:46

今日快看!声明一下我以后的态度

与恶魔斗争的人要时刻警惕，以免自己也成为恶魔。——尼采将邪恶的产生

2023-06-19 16:17:52

潍坊市人民医院获得“山东省医院智慧医疗及智慧管理优秀案例”二等奖

贵州“村超”持续火爆 游客纷纷点赞榕江美食

【全球播资讯】华晨重整协议“敲定”！投资交易对价不超过164亿元，沈阳汽车拟获三家上市公司控制权

重点聚焦!展示世界观及部分内容《女神异闻录3 Reload》特别视频

全球速读：开源证券：商品房销售金额仍增长，新开工承压竣工改善

无冠退役？保罗被发配华盛顿成为赢家，洛杉矶双雄伺机捡漏|世界速读

哈尔滨新区加速培育“星”动能|环球要闻

从江：买卖合同引纠纷 高效调解暖人心

国泰君安：维持首钢资源(00639)“增持”评级 目标价2.94港元_当前最新

政府红头文件格式标准（政府红头文件格式）

环球通讯！周蕙：谁说歌迷一定是年轻人，我唱给中年人听

强降雨持续盘踞江南华南等地 华北高温短暂缓解 环球最资讯

瑞达期货：螺纹钢2310合约维持震荡偏多交易

权衡欧央行加息 欧股上周五收涨

今日视点：冷食冷饮上市公司股票有哪些？相关冷食冷饮龙头一览（2023/6/19）

环球微头条丨匠石运斤告诉我们什么道理_匠石运斤

中国加入CPTPP最新进展！递交相关加入文件，对照标准先行试点

天天观速讯丨离谱！女子在景区坐竹筏被涉水汽车撞了，景区回应：事故已解决，水浅的时候汽车可以行驶

黄金消费格局升级 中国“Z世代”爱买黄金为哪般？ 全球时快讯

京东健康618打退你的选择困难，寿仙谷、阿依舍怎么买都合适

工行保定分行开展2023年度反假货币理论及实操技能测评

销售毛利率和销售净利率的关系 销售毛利率和销售净利率|环球精选

“马克龙不希望他当上，正在阻止”-环球最新

贵州省所有高职院校排名 室内设计专业好的专科院校有哪些 全球视点

模拟填报志愿系统（模拟填报志愿）-观速讯
x 广告
电视
台属为防疫工作者送去卤肉饭：希望美食能缓解疲惫

台属为防疫工作者送去卤肉饭：希望美食能缓解疲惫

从前 报告：超3成白领全年读书不足1本

报告：超3成白领全年读书不足1本

从前 浙江金华：战疫求助平台令疫情防控显“温度”

浙江金华：战疫求助平台令疫情防控显“温度”

从前 浙江一高校现考研“学霸寝室” 全员上岸985院校

浙江一高校现考研“学霸寝室” 全员上岸985院校

从前 沙尘追踪：目前沙尘已抵达华北 北京高空区域开始泛黄

沙尘追踪：目前沙尘已抵达华北 北京高空区域开始泛黄

从前
冰箱

汇聚公益力量 2022年“乡村振兴·重庆专场”公益活动开幕

中新网重庆4月21日电 (记者 钟旖)2022年“乡村振兴·重庆专场”公益活动开幕暨宣传周启动仪式21日在重...

从前

外国人在上海：奔跑的“洋大白”

“我是一个健康的外国人 生活在这个美丽的社区 我所有的测试都是阴性 我会说一点中文 请让我把沉重的货物 送...

从前

海南陵水新增3例新冠肺炎确诊病例

中新网海南陵水4月21日电 (记者 王晓斌)海南省陵水黎族自治县新型冠状病毒肺炎疫情防控工作指挥部21日...

从前

加快实现社会面清零目标 上海崇明继续做好“三区”分级管理

光明网讯(记者 赵艳艳)在今日(4月21日)举行的上海市新冠肺炎疫情防控工作第160场新闻发布会上，上海市...

从前

上海金山朱泾镇：居民有序出门购物，商超使用场所码

“我们家是镇里第一批发的通行证，我们家人还是响应号召，非必要不出门。”几天前，上海市金山区朱泾镇...

从前
空调
x 广告
精彩推送

Copyright @  2015-2022 海峡家电网版权所有  备案号： 皖ICP备2022009963号-10   联系邮箱：396 029 142 @qq.com