00.stencil:03.stencilの_propと_state

差分

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

この比較画面へのリンク

--- 00.stencil:03.stencilの_propと_state [2019/09/25] – 作成 adash333
+++ 00.stencil:03.stencilの_propと_state [2019/09/26] (現在) – [@state()の解説のリンク] adash333
@@ 行 1: / 行 1: @@
 ====== 03.Stencilの@propと@state ======
+Angularには、双方向データバインディングがあるのですが、Stencilには単方向データバインディングしかないです。
+そのため、Stencilでは、フォームからの入力データを@state()で受け取り、何かに入れて、render()で表示するようにプログラミングする必要があります。
+引用元：https://www.joshmorony.com/building-a-pwa-with-stencil-storage-and-services/
+<code javascript>
+  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>
@@ 行 9: / 行 27: @@
 Prop Decorator(公式ドキュメント)
+Props should be used to pass data down from the parent component to the child component.
+親コンポーネント内のデータを、子コンポーネントに伝達するためには、親コンポーネント内でデータに@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()の解説のリンク =====
@@ 行 16: / 行 58: @@
 https://stenciljs.com/docs/state
 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.1569383265.txt.gz · 最終更新: 2019/09/25 by adash333