---
title: "Vue.js における v-model と model-value のリアクティブ性の違い - 憂いを忘れる一枚"
description: "Vue.js の v-model と model-value は、どちらもフォームデータの双方向バインディングを実現するために使用されるディレクティブです。"
canonical_url: "https://www.ikxin.com/ja/article/vue-model-reactivity"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": "Vue.js の v-model と model-value は、どちらもフォームデータの双方向バインディングを実現するために使用されるディレクティブです。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~VnVlLmpzIOOBq-OBiuOBkeOCiyB2LW1vZGVsIOOBqCBtb2RlbC12YWx1ZSDjga7jg6rjgqLjgq~jg4bjgqPjg5bmgKfjga7pgZXjgYQgLSDmhoLjgYTjgpLlv5jjgozjgovkuIDmnpo%2Cc_Article%2Ctitle_~VnVlLmpzIOOBq-OBiuOBkeOCiyB2LW1vZGVsIOOBqCBtb2RlbC12YWx1ZSDjga7jg6rjgqLjgq~jg4bjgqPjg5bmgKfjga7pgZXjgYQ%2Cdescription_~VnVlLmpzIOOBriB2LW1vZGVsIOOBqCBtb2RlbC12YWx1ZSDjga~jgIHjganjgaHjgonjgoLjg5Xjgqnjg7zjg6Djg4fjg7zjgr~jga7lj4zmlrnlkJHjg5DjgqTjg7Pjg4fjgqPjg7PjgrDjgpLlrp~nj77jgZnjgovjgZ~jgoHjgavkvb~nlKjjgZXjgozjgovjg4fjgqPjg6zjgq~jg4bjgqPjg5bjgafjgZnjgII%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL3Z1ZS1tb2RlbC1yZWFjdGl2aXR5Ig%2Cs_6exVh3H2Ul9Vvx0h.png"
  "og:image:alt": "Vue.js における v-model と model-value のリアクティブ性の違い - 憂いを忘れる一枚"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Vue.js における v-model と model-value のリアクティブ性の違い"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~VnVlLmpzIOOBq-OBiuOBkeOCiyB2LW1vZGVsIOOBqCBtb2RlbC12YWx1ZSDjga7jg6rjgqLjgq~jg4bjgqPjg5bmgKfjga7pgZXjgYQgLSDmhoLjgYTjgpLlv5jjgozjgovkuIDmnpo%2Cc_Article%2Ctitle_~VnVlLmpzIOOBq-OBiuOBkeOCiyB2LW1vZGVsIOOBqCBtb2RlbC12YWx1ZSDjga7jg6rjgqLjgq~jg4bjgqPjg5bmgKfjga7pgZXjgYQ%2Cdescription_~VnVlLmpzIOOBriB2LW1vZGVsIOOBqCBtb2RlbC12YWx1ZSDjga~jgIHjganjgaHjgonjgoLjg5Xjgqnjg7zjg6Djg4fjg7zjgr~jga7lj4zmlrnlkJHjg5DjgqTjg7Pjg4fjgqPjg7PjgrDjgpLlrp~nj77jgZnjgovjgZ~jgoHjgavkvb~nlKjjgZXjgozjgovjg4fjgqPjg6zjgq~jg4bjgqPjg5bjgafjgZnjgII%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL3Z1ZS1tb2RlbC1yZWFjdGl2aXR5Ig%2Cs_6exVh3H2Ul9Vvx0h.png"
  "twitter:image:alt": "Vue.js における v-model と model-value のリアクティブ性の違い - 憂いを忘れる一枚"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **Vue.js における v-model と model-value のリアクティブ性の違い**

2023.03.28 5,257  0

Vue.js の `v-model` と `model-value` は、どちらもフォームデータの双方向バインディングを実現するために使用されるディレクティブです。

`v-model` は Vue.js が提供するシンタックスシュガーで、テンプレート内でフォームデータの双方向バインディングをより簡単に実現できます。フォーム要素で `v-model` を使用すると、要素の `input` または `change` イベントを自動的に監視し、フォーム要素の値を対応する Vue コンポーネントのデータに同期します。その逆も同様です。例：

 HTML

```
<input v-model="message" />
```

これにより、フォーム要素の値と Vue インスタンス内の `message` データが双方向にバインドされます。ユーザーがフォーム要素に値を入力すると、`message` データが自動的に更新されます。`message` データに変更があると、フォーム要素内の値も自動的に更新されます。

`model-value` は Vue 3 で新たに追加されたプロパティで、カスタムコンポーネント内でフォームデータの双方向バインディングを実現するために使用されます。`v-model` とは異なり、`model-value` はディレクティブではなくプロパティであり、カスタムコンポーネントのオプションで設定する必要があります。例：

 JavaScript

```
app.component('my-component', {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  `
})
```

ここでは、`my-component` という名前のカスタムコンポーネントを定義し、その `props` に `modelValue` というプロパティを定義しています。コンポーネントのテンプレートでは、このプロパティを使用してフォーム要素の値をバインドすると同時に、フォーム要素の `input` イベントで `update:modelValue` というカスタムイベントを発生させ、入力された値を引数として親コンポーネントに渡しています。このカスタムコンポーネントを使用する際は、次のように `v-model` を使用してフォームデータの双方向バインディングを実現できます：

 HTML

```
<my-component v-model="message" />
```

要するに、`v-model` は Vue.js でフォームデータの双方向バインディングを実現するために使用される一般的なディレクティブであり、`model-value` はカスタムコンポーネントでフォームデータの双方向バインディングを実現する新しい方法です。

## **コメント**

(0)

まだコメントはありません

## **コメントを投稿**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/vue-model-reactivity#webpage","@type":"WebPage","description":"Vue.js の v-model と model-value は、どちらもフォームデータの双方向バインディングを実現するために使用されるディレクティブです。","name":"Vue.js における v-model と model-value のリアクティブ性の違い","url":"https://www.ikxin.com/ja/article/vue-model-reactivity","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/vue-model-reactivity"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.