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 说明
可以进行组件访问，返回一个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
stenciljs 学习四 组装饰器
原文地址：https://www.cnblogs.com/rongfengliang/p/9710451.html