stenciljs 学习四 组件装饰器

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

posted on 2018-09-26 22:20  荣锋亮  阅读(1199)  评论(0编辑  收藏  举报

导航