Vue のコンポーネントと props はどのように機能しますか?

Question

Accepted Answer

**コンポーネント**は、再利用可能で自己完結型の UI の部分です。**Props** は、親が子にデータを*下*に渡す方法です — それらは子の型付けされた読み取り専用入力です。 ## 子の props を定義する ```vue ``` ## 親から props を渡す ```vue ``` 違いに注意してください: `name="Ann"` はリテラル文字列を渡しますが、`:age="30"` (`v-bind` 付き) は式を評価します — 数値、ブール値、オブジェクト、または変数に必要です。また、prop 名は JavaScript では `camelCase` ですがテンプレートでは `kebab-case` です (`isAdmin` → `:is-admin`)。 ## Props は一方向で読み取り専用 ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` データは**下**に流れます (親 → 子)。子は自分の props を変更してはいけません。何かを変更する必要がある場合は、ローカルコピーを使用するか、**イベントを発行**して親にソースを変更するよう求めます ("props 下、イベント上")。この一方向のフローはデータを予測可能に保ちます。 ## TypeScript props ```vue ``` ## なぜ重要なのかコンポーネント + props は Vue アーキテクチャの基礎です — 再利用可能なコンポーネントから UI を構成し、props で設定します。 prop が**一方向で読み取り専用** (データダウン、イベントアップ) であることを理解することが、Vue アプリを予測可能に保つコアメンタルモデルです。prop を変異させたり、双方向の prop フローを期待したりすることは、バグの古典的な原因です。