00.stencil:03.stencilの_propと_state
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
00.stencil:03.stencilの_propと_state [2019/09/26] – [@prop()の解説のリンク] adash333 | 00.stencil:03.stencilの_propと_state [2019/09/26] (現在) – [@state()の解説のリンク] adash333 | ||
---|---|---|---|
行 30: | 行 30: | ||
親コンポーネント内のデータを、子コンポーネントに伝達するためには、親コンポーネント内でデータに@prop()というデコレータをつけて、エクスポートして、それを子コンポーネントで受けとるという作業が必要になります。 | 親コンポーネント内のデータを、子コンポーネントに伝達するためには、親コンポーネント内でデータに@prop()というデコレータをつけて、エクスポートして、それを子コンポーネントで受けとるという作業が必要になります。 | ||
+ | |||
+ | 公式ドキュメントには以下のように記載させています。後で実際に試してみたいと思います。 | ||
親コンポーネント | 親コンポーネント | ||
行 37: | 行 39: | ||
... | ... | ||
export class TodoList { | export class TodoList { | ||
- | @Prop() | + | @Prop() |
- | @Prop() | + | @Prop() favoriteNumber: number; |
- | @Prop() | + | @Prop() |
+ | @Prop() | ||
} | } | ||
+ | </ | ||
+ | 子コンポーネントで、上記のcolorを受けとる方法 | ||
+ | < | ||
+ | logColor() { | ||
+ | console.log(this.color) | ||
+ | } | ||
</ | </ | ||
+ | ===== @state()の解説のリンク ===== | ||
+ | https:// | ||
+ | State Decorator(公式ドキュメント) | ||
+ | 内容が変化する可能性のあるデータには、 | ||
+ | @state()デコレータをつけるそうです。 | ||
- | ===== @state()の解説のリンク ===== | + | Any changes to a @State() property will cause the components render function to be called again. |
+ | @State() propertyが変更されるたびに、コンポーネントのrender関数が呼び出される(再描画される)。 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | コンポーネント | ||
+ | < | ||
+ | @State() holdings: Holding[] | ||
+ | </ | ||
+ | と、holdingsに@State()をつけることで、 | ||
+ | < | ||
+ | componentDidLoad() { | ||
+ | const router | ||
+ | |||
+ | // Refresh data every time view is entered | ||
+ | router.addEventListener(" | ||
+ | const holdings | ||
+ | this.holdings | ||
+ | }); | ||
+ | } | ||
+ | </ | ||
+ | により、ページのアドレスが変化するたびに、holdingsが再描画されて、表示されるものが最新のものになるようにしています。 | ||
- | https:// | ||
- | State Decorator(公式ドキュメント) | ||
00.stencil/03.stencilの_propと_state.1569460541.txt.gz · 最終更新: 2019/09/26 by adash333