StencilJs学习之组件装饰器
stenciljs 可以方便的构建交互式组件
支持以下装饰器
- component
- state
- prop
- watch
- method
- element
- event
- listen
Component 装饰器
@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
装饰器还有其它的一些参数
- assetsDirs: 是从组件到包含组件所需的静态文件(资产)的目录的相对路径数组。
- scope:是否隔离css的作用域,如果启用了
shadow
则此项不能设置为true
。 - shadow: 阴影dom用来隔离样式。
- styleUrls:包含要应用于组件的样式的外部样式表的相对 URL 列表。
- styles:内联 CSS 而不是使用外部样式表的字符串。
State
@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
@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
@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);
}
}
mehtod
可以方便的导出函数,方便外部调用。
import { Method } from '@stencil/core';
export class TodoList {
@Method()
async showPrompt() {
// show a prompt
}
}
// used registered
el.showPrompt();
Element
@Element
装饰器是如何访问类实例中的 host 元素。这将返回一个 HTMLElement
实例,因此可以在此处使用标准 DOM 方法/事件。
import { Element } from '@stencil/core';
...
export class TodoList {
@Element() el: HTMLElement;
getListHeight(): number {
return this.el.getBoundingClientRect().height;
}
}
其它
Event 和 Listen 装饰器将在下一节 事件 中讲解。
热门相关:总裁别再玩了 法医王妃不好当! 朕是红颜祸水 两个女人在有风景的海滩 美景之屋3