kazuki.m
共通コンポーネントの設計や実装の基本をやってみます
やってみたこと
使用頻度が高いコンポーネントは共通化して再利用できるようにしたい。
共通コンポーネントの設計・実装をするために、親→子へ渡すPorpsと子→親へ返すEmitsを実際に動かしないがら理解する。
Props
propsはイメージがしやすく子コンポーネントにPropsを設定し、親コンポーネントからv-bindを使って子のProps値に値を渡してあげる。
親コンポーネントのリアクティブ変数を渡してあげれば、子も反映される。
Emits
emitsは子コンポーネントのイベント発火タイミングで、親にイベント処理や値を返すことが可能。
v-modelを使って、更新イベントと値の更新をまとめて設定できたりもする。
ページごとにサーバー側のロジック部分で処理しているとあまり使用頻度が高くなかったが、コンポーネントの共通化を進めるためには必要。
とりあえず簡単なサンプルで確認してみる。
今回は子側でテキスト入力して、その値を親側に反映する処理で確認してみる。
＊Typescrriptの型をanyにしてしまっているのは、未熟だからです。型安全なコーディングも学びたい。。。
Props、EmitsからProvider、Inject、Store
簡単なサンプルコンポーネントでPropsとEmitsの処理の流れを追えました。
とりあえず動かしてみることは大事です。今回の基礎をおさえて、次はProvider、InjectやPinia（Store）を！
以上
