Vue Component
Definition
Vue Component は、UI 表示、内部 state、外部との入出力契約をひとまとまりにした再利用可能な構成単位である。
Why It Matters
Vue 学習ではテンプレート構文に目が行きやすいが、実務では component をどう切り、何を props で受け、何を emits で返すかが設計の中心になる。
Current Understanding
Component Basics, Props, Events, Slots, Provide / Inject などは、すべて component をどう設計するかの異なる面を扱っている。component は単なる見た目部品ではなく、責務分割の単位であり、状態と契約の境界でもある。
Composition API では、component の内部ロジックを composable へ外出ししやすくなる。そのため component は「何でも抱え込む場所」ではなく、UI と契約の境界として薄く保つ設計が重要になる。
Connections
- Vue Props and Emits
- Vue Composable
- Component Basics - 親子コンポーネント通信の基礎
- Props - 親子コンポーネント間の入力契約
- Events - 子から親への通知契約
- Slots - 親が描画責務を差し込むコンポーネント拡張ポイント
- Composables - 状態を持つロジックの再利用
New Insights
- component は UI 部品というより、責務と契約の境界として理解した方が設計に効く
- composable の導入で、component には表示責務を寄せやすくなる
Open Questions
- props and emits を独立 PermanentNote に切るべきか
- container/presentational 的な設計観点を Vue ノート群へどこまで入れるか