其實并沒有所謂的 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，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555707.html
標籤：JavaScript
下一篇：返回列表