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 裝飾器將在下一節 事件 中講解。