stenciljs 可以方便的构建交互式组件
支持以下装饰器
component
prop
watch
state
method
element
component 说明
component 包含tag styleUrl 参数
tag 定义组件的名称，注意需要使用-连接， styleUrl 指定组件的样式
参考格式：
import { Component } from '@stencil/core';
@Component({
tag: 'todo-list',
styleUrl: 'todo-list.css'
})
export class TodoList {
...
}
prop 说明
定义组件的自定义属性，可以方便的进行组件间数据的传递
支持的数据类型有number string boolean Object array,可以
使用this 进行数据访问，在html 设置需要使用dash-case 方式
在jsx 中使用camelCase 方式，默认prop 是不可变的，使用添加
mutable: true 进行修改，同时我们可以设置默认值
参考：
import { Prop } from '@stencil/core';
...
export class TodoList {
@Prop() color: string;
@Prop() favoriteNumber: number;
@Prop() isSelected: boolean;
@Prop() myHttpService: MyHttpService;
}
this 调用
logColor() {
console.log(this.color)
}
html 设置属性
<todo-list color="blue" favorite-number="24" is-selected="true"></todo-list>
jsx 设置属性
<todo-list color="blue" favoriteNumber="24" isSelected="true"></todo-list>
设置默认值
@Prop({ mutable: true }) name: string = 'Stencil';
watch 说明
我们可以使用watch 进行prop 值验证处理，包含新、旧数据
参考：
import { Prop, Watch } from '@stencil/core';
...
export class LoadingIndicator {
@Prop() activated: boolean;
@Watch('activated')
watchHandler(newValue: boolean, oldValue: boolean) {
console.log('The new value of activated is: ', newValue);
}
}state 说明
state 可以进行组件内部状态的管理，state 的更新会造成render 再次调用组件
函数
import { State } from '@stencil/core';
...
export class TodoList {
@State() completedTodos: Todo[];
completeTodo(todo: Todo) {
// This will cause our render function to be called again
this.completedTodos = [...this.completedTodos, todo];
}
render() {
//
}
}method 说明
可以方便的导出函数，方便外部调用
参考：
import { Method } from '@stencil/core';
...
export class TodoList {
@Method()
showPrompt() {
// show a prompt
}
}
调用：
const todoListElement = document.querySelector('todo-list');
todoListElement.showPrompt();Element 说明
可以在class中访问当前组件，返回一个HTMLElement,可以使用DOM方式以及
事件
import { Element } from '@stencil/core';
...
export class TodoList {
@Element() todoListEl: HTMLElement;
addClass(){
this.todoListEl.classList.add('active');
}
}嵌入&&嵌套组件
参考：
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-embedded-component'
})
export class MyEmbeddedComponent {
@Prop() color: string = 'blue';
render() {
return (
<div>My favorite color is {this.color}</div>
);
}
}
import { Component } from '@stencil/core';
@Component({
tag: 'my-parent-component'
})
export class MyParentComponent {
render() {
return (
<div>
<my-embedded-component color="red"></my-embedded-component>
</div>
);
}
}参考资料
https://stenciljs.com/docs/decorators
