サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

このページへのアクセス
今日: 1 / 昨日: 0
総計: 2

sidebar

00.stencil:03.stencilの_propと_state


文書の過去の版を表示しています。


03.Stencilの@propと@state

Angularには、双方向データバインディングがあるのですが、Stencilには単方向データバインディングしかないです。

そのため、Stencilでは、フォームからの入力データを@state()で受け取り、何かに入れて、render()で表示するようにプログラミングする必要があります。

引用元:https://www.joshmorony.com/building-a-pwa-with-stencil-storage-and-services/

  componentDidLoad() {
    const router = document.querySelector("ion-router");
 
    // Refresh data every time view is entered
    router.addEventListener("ionRouteDidChange", async () => {
      const holdings = await Holdings.getHoldings();
      this.holdings = [...holdings];
    });
  }

@prop()の解説のリンク

https://stenciljs.com/docs/properties
Prop Decorator(公式ドキュメント)

Props should be used to pass data down from the parent component to the child component.

親コンポーネント内のデータを、子コンポーネントに伝達するためには、親コンポーネント内でデータに@prop()というデコレータをつけて、エクスポートして、それを子コンポーネントで受けとるという作業が必要になります。

親コンポーネント

import { Prop } from '@stencil/core';
 
...
export class TodoList {
  @Prop() todoid: number;
  @Prop() title: string;
  @Prop() description: string;
}

@state()の解説のリンク

https://stenciljs.com/docs/state
State Decorator(公式ドキュメント)

リンク


00.stencil/03.stencilの_propと_state.1569460541.txt.gz · 最終更新: 2019/09/26 by adash333