Vue Academy · レッスン

v-model：双方向バインディングの内部動作

v-modelが:modelValue + @update:modelValueにコンパイルされる仕組み、カスタムv-model名、コンポーネントでのv-modelについて学習します。

レッスン 1/413 ステップ

「v-model：双方向バインディングの内部動作」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

v-model の正体

v-modelは双方向バインディングのように見えますが、実際には値のバインディングとイベントリスナーを組み合わせた短縮記法にすぎません。どのように展開されるかを理解すると、入力要素にもカスタムコンポーネントにも使用できるようになります。

テキスト入力で v-model を使う

ネイティブのinputでは、v-modelが値をバインドし、inputイベントをリッスンします。この2行は同じ意味になります。

<!-- shorthand -->
<input v-model="text" />

<!-- expanded -->
<input :value="text" @input="text = $event.target.value" />

2つの要素：バインドとリッスン

:valueは状態を要素へ渡し、@inputはユーザーの変更を状態へ戻します。これらを組み合わせることで、双方向の動作が実現します。

コンポーネントの v-model は仕組みが異なる

カスタムコンポーネントでは、v-model は異なるプロパティとイベント、つまり modelValue と update:modelValue を使用します。ネイティブの value/input はネイティブ要素に対してのみ使用します。

<!-- on a component -->
<MyInput v-model="text" />

<!-- expands to -->
<MyInput :model-value="text" @update:model-value="text = $event" />

子コンポーネントで v-model を実装する

v-model に対応するには、子コンポーネントで modelValue プロパティを宣言し、値を変更するときに update:modelValue を発行します。

<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) { emit('update:modelValue', e.target.value) }
</script>

子コンポーネントのテンプレート

子コンポーネントは受け取ったプロパティを入力欄にバインドし、変更時にイベントを発行します。親コンポーネントは内部の詳細を知る必要がありません。

<template>
  <input :value="modelValue" @input="onInput" />
</template>

名前付き v-model 引数

モデルに名前を付けることで、特定のプロパティを対象にできます。v-model:title は title プロパティと update:title イベントを使用します。

<!-- parent -->
<MyDialog v-model:title="pageTitle" />

<!-- expands to -->
<MyDialog :title="pageTitle" @update:title="pageTitle = $event" />

子コンポーネントで名前付きモデルを宣言する

子コンポーネントでは、その名前のプロパティと対応するイベントを宣言するだけです。

<script setup>
defineProps(['title'])
const emit = defineEmits(['update:title'])
</script>

1つのコンポーネントで複数の v-model

各モデルには固有の名前があるため、複数のモデルを同時にバインドできます。たとえば、ユーザーフォームのコンポーネントで v-model:first と v-model:last を同時に公開できます。

<UserName
  v-model:first="firstName"
  v-model:last="lastName"
/>

この設計が強力な理由

v-model はプロパティとイベントの組み合わせにすぎないため、カスタムコンポーネントも利用側からはネイティブの入力要素とまったく同じように扱えます。名前付きモデルを複数使えば、1つのコンポーネントで複数の双方向バインディングをすっきり管理できます。

よくある落とし穴

子コンポーネント内で modelValue プロパティを直接変更しないでください。これは一方向のプロパティフローを壊します。必ず更新イベントを発行し、状態は親コンポーネントに管理させてください。

理解度チェック

v-model の内部動作について確認します。

対話的なレッスンで答える

まとめ

ここまでで v-model の仕組みを学びました。

入力要素では :value + @input に展開されます。
コンポーネントでは modelValue + update:modelValue を使用します。
名前付きモデル（v-model:title）では、特定のプロパティとイベントを対象にできます。
1つのコンポーネントで複数の v-model を使用できます。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「v-model：双方向バインディングの内部動作」レッスンは無料ですか？

はい。「v-model：双方向バインディングの内部動作」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「v-model：双方向バインディングの内部動作」で何を学びますか？

v-modelが:modelValue + @update:modelValueにコンパイルされる仕組み、カスタムv-model名、コンポーネントでのv-modelについて学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「v-model：双方向バインディングの内部動作」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る