stenciljs 学习四 组装饰器

Posted 2021-01-08 rongfengliang-荣锋亮

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