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

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

ユーザ用ツール

サイト用ツール


00.stencil:03.stencilの_propと_state


差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.stencil:03.stencilの_propと_state [2019/09/25]
adash333 [@prop()の解説のリンク]
00.stencil:03.stencilの_propと_state [2019/09/26] (現在)
adash333 [@state()の解説のリンク]
行 31: 行 31:
 親コンポーネント内のデータを、子コンポーネントに伝達するためには、親コンポーネント内でデータに@prop()というデコレータをつけて、エクスポートして、それを子コンポーネントで受けとるという作業が必要になります。 親コンポーネント内のデータを、子コンポーネントに伝達するためには、親コンポーネント内でデータに@prop()というデコレータをつけて、エクスポートして、それを子コンポーネントで受けとるという作業が必要になります。
  
 +公式ドキュメントには以下のように記載させています。後で実際に試してみたいと思います。
  
 +親コンポーネント
 +<code javascript>
 +import { Prop } from '@stencil/core';
 +
 +...
 +export class TodoList {
 +  @Prop() color: string;
 +  @Prop() favoriteNumber: number;
 +  @Prop() isSelected: boolean;
 +  @Prop() myHttpService: MyHttpService;
 +}
 +</code>
 +
 +子コンポーネントで、上記のcolorを受けとる方法
 +<code>
 +logColor() {
 +  console.log(this.color)
 +}
 +</code>
  
 ===== @state()の解説のリンク ===== ===== @state()の解説のリンク =====
行 38: 行 58:
 https://stenciljs.com/docs/state https://stenciljs.com/docs/state
 State Decorator(公式ドキュメント) State Decorator(公式ドキュメント)
 +
 +内容が変化する可能性のあるデータには、
 +@state()デコレータをつけるそうです。
 +
 + Any changes to a @State() property will cause the components render function to be called again.
 +@State() propertyが変更されるたびに、コンポーネントのrender関数が呼び出される(再描画される)。
 +
 +https://www.joshmorony.com/building-a-pwa-with-stencil-storage-and-services/ では、
 +
 +コンポーネント  src/components/app-home/app-home.tsx で、
 +<code>
 +  @State() holdings: Holding[] = [];
 +</code>
 +と、holdingsに@State()をつけることで、
 +<code>
 +  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];
 +    });
 +  }
 +</code>
 +により、ページのアドレスが変化するたびに、holdingsが再描画されて、表示されるものが最新のものになるようにしています。
 +
 +
  
  


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