Tag: component
16 items with this tag.
LiteratureNotes
Routing - URLを状態として扱う画面遷移基盤
VueのRoutingの基本概念と、クライアントサイドルーティングがURLを状態として画面コンポーネントを切り替える仕組みを整理する。Vue Routerが抽象化する責務と、実務でRouting基盤が必要になる判断軸も記録する。
LiteratureNotes
Testing - Vueアプリの品質を守る3層戦略
VueアプリケーションにおけるTestingの目的と、Unit / Component / End-to-End の3層戦略を整理する。Vitest、Vue Test Utils、Cypress、Playwright の使い分けと、Component Testingで重視すべきblackboxな観点を記録する。
LiteratureNotes
TypeScript with Composition API - 推論中心の型設計
Composition API で TypeScript を使う際の中核パターンを整理する。props と emits の契約定義、ref / reactive / computed の推論、DOM・inject・template ref といった境界での明示型付けをまとめる。
LiteratureNotes
Slots - 親が描画責務を差し込むコンポーネント拡張ポイント
Vue.js の Slots によるコンポーネント拡張ポイントを整理する。default slot, named slots, scoped slots, renderless component の責務分担と、Composition API 時代の composable との関係をまとめる。
LiteratureNotes
Provide / Inject - 深い子孫へ文脈依存を直接渡す仕組み
Vue.js の Provide / Inject による dependency 共有を整理する。prop drilling の解消、reactive な共有、更新責務の置き方、app-level provide、Symbol key による衝突回避までをまとめる。
LiteratureNotes
Async Components - 必要時にコンポーネントを遅延ロードする
Vue.js の Async Components による lazy loading を整理する。defineAsyncComponent, dynamic import, loading/error state, lazy hydration, Suspense との関係、および実務での採用判断をまとめる。
LiteratureNotes
Lifecycle Hooks - コンポーネントの時間軸と副作用配置
Vue.js の Lifecycle Hooks におけるコンポーネントの時間軸、onMounted / onUpdated / onUnmounted の役割、hook 登録タイミング、値監視との役割分担を整理する。
LiteratureNotes
Template Refs - DOM参照と子コンポーネント参照
Template ref を使って DOM 要素や子コンポーネントの参照を取得する方法と、宣言的UIを崩しすぎずに使うための判断軸を整理する。useTemplateRef、component ref、v-for 内 ref、function ref の使い分けを扱う。
LiteratureNotes
Component Basics - 親子コンポーネント通信の基礎
Vue コンポーネントを再利用可能な UI 部品として定義し、親子間で props・emit・slot を使って責務分離する基本設計を整理する。dynamic components と SFC 前提の実務判断も扱う。
LiteratureNotes
Component Registration - グローバル登録とローカル登録
Vueコンポーネントを利用可能にする登録方法として、global registration と local registration の違い、および <script setup> における実務的な使い方を整理する。名前付け規則と保守性の観点も含めて記録する。
LiteratureNotes
Props - 親子コンポーネント間の入力契約
Vue 3 における props の宣言、受け渡し、一方向データフロー、バリデーションを整理する。<script setup> と TypeScript を前提に、保守性を意識した props 設計の実務判断も記録する。
LiteratureNotes
Events - 子から親への通知契約
Vue 3 における component events の発火、受信、payload 受け渡し、defineEmits による契約定義を整理する。props と対になる子→親通信として、TypeScript ベースの実務的な設計判断も記録する。
LiteratureNotes
Component v-model - 親子双方向バインディングの契約
Vue 3.4以降の defineModel() を中心に、コンポーネント v-model の実体である prop と event の契約、複数 v-model、modifier の扱いを整理する。
LiteratureNotes
Fallthrough Attributes - コンポーネント外部属性の着地点
props や emits で消費されない属性が root 要素や下位コンポーネントへどう継承されるか、inheritAttrs: false と $attrs / useAttrs() による明示制御を整理する。
LiteratureNotes
Class and Style Bindings - 状態に応じた見た目の制御
Vue 3 における class と inline style の動的バインディングについて、object / array 構文、computed との組み合わせ、component への継承、ベンダープレフィックスの扱いを整理したノート。
LiteratureNotes
Conditional Rendering - 条件による描画制御
Vue 3 の conditional rendering について、v-if / v-else-if / v-else / template v-if / v-show の違いと、実務での使い分けを整理したノート。