stenciljs 可以方便的构建交互式组件
支持以下装饰器
@Component
是一个装饰器,它将 TypeScript 类指定为 Stencil
组件。 每个模板组件在构建时都会转换为 Web component。
import { Component } from '@stencil/core'; @Component({ tag: 'todo-list', styleUrl: './todo-list.css', // additional options }) export class TodoList { // implementation omitted }
@Component
装饰器还有其它的一些参数
shadow
则此项不能设置为 true
。@State
用于内部的状态管理,修改 @State
装饰的变量会触发组件的重新渲染
import { Component, State, h } from '@stencil/core'; @Component({ tag: 'current-time', }) export class CurrentTime { timer: number; // `currentTime` is decorated with `@State()`, // as we need to trigger a rerender when its // value changes to show the latest time @State() currentTime: number = Date.now(); connectedCallback() { this.timer = window.setInterval(() => { // the assignment to `this.currentTime` // will trigger a re-render this.currentTime = Date.now(); }, 1000); } disconnectedCallback() { window.clearInterval(this.timer); } render() { const time = new Date(this.currentTime).toLocaleTimeString(); return ( <span>{time}</span> ); } }
@Prop
是用于声明外部数据传入组件的装饰器。
支持的数据类型有 number
string
boolean
Object
array
,可以
使用this 进行数据访问,在html 设置需要使用dash-case 方式
在jsx 中使用camelCase 方式,默认prop 是不可变的,使用添加mutable: true
进行修改, 使用 reflech
可以保持 prop
和 html属性
同步
import { Component, Prop, h } from '@stencil/core'; @Component({ tag: 'todo-list-item', }) export class ToDoListItem { @Prop({ mutable: true, reflect: false }) isComplete: boolean = false; @Prop({ reflect: true }) timesCompletedInPast: number = 2; @Prop({ reflect: true }) thingToDo: string = "Read Reflect Section of Stencil Docs"; }
@Watch()
是应用于模具组件方法的修饰器。 修饰器接受单个参数,即用 @Prop()
或 @State()
修饰的类成员的名称。 用 @Watch()
修饰的方法将在其关联的类成员更改时自动运行。
// We import Prop & State to show how `@Watch()` can be used on // class members decorated with either `@Prop()` or `@State()` import { Component, Prop, State, Watch } from '@stencil/core'; @Component({ tag: 'loading-indicator' }) export class LoadingIndicator { // We decorate a class member with @Prop() so that we // can apply @Watch() @Prop() activated: boolean; // We decorate a class member with @State() so that we // can apply @Watch() @State() busy: boolean; // Apply @Watch() for the component's `activated` member. // Whenever `activated` changes, this method will fire. @Watch('activated') watchPropHandler(newValue: boolean, oldValue: boolean) { console.log('The old value of activated is: ', oldValue); console.log('The new value of activated is: ', newValue); } // Apply @Watch() for the component's `busy` member. // Whenever `busy` changes, this method will fire. @Watch('busy') watchStateHandler(newValue: boolean, oldValue: boolean) { console.log('The old value of busy is: ', oldValue); console.log('The new value of busy is: ', newValue); } @Watch('activated') @Watch('busy') watchMultiple(newValue: boolean, oldValue: boolean, propName:string) { console.log(`The new value of ${propName} is: `, newValue); } }
可以方便的导出函数,方便外部调用。
import { Method } from '@stencil/core'; export class TodoList { @Method() async showPrompt() { // show a prompt } } // used registered el.showPrompt();
@Element
装饰器是如何访问类实例中的 host 元素。这将返回一个 HTMLElement
实例,因此可以在此处使用标准 DOM 方法/事件。
import { Element } from '@stencil/core'; ... export class TodoList { @Element() el: HTMLElement; getListHeight(): number { return this.el.getBoundingClientRect().height; } }
Event 和 Listen 装饰器将在下一节 事件 中讲解。