---
title: "Vue.js 中的 v-model 和 model-value 響應式區別 - 一紙忘憂"
description: "Vue.js 中的 v-model 和 model-value 都是用於實現表單資料雙向繫結的指令。"
canonical_url: "https://www.ikxin.com/zh-tw/article/vue-model-reactivity"
last_updated: "2026-09-16T09:59:27.259Z"
locale: zh-tw
meta:
  "og:description": "Vue.js 中的 v-model 和 model-value 都是用於實現表單資料雙向繫結的指令。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDpn7~mh4nlvI~ljYDliKUgLSDkuIDntJnlv5jmhoI%2Cc_Article%2Ctitle_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDpn7~mh4nlvI~ljYDliKU%2Cdescription_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDpg73mmK~nlKjmlrzlr6bnj77ooajllq7os4fmlpnpm5nlkJHnuavntZDnmoTmjIfku6TjgII%2CsiteName_~5LiA57SZ5b-Y5oaC%2CsiteHost_www.ikxin.com%2Cp_Ii96aC10dy9hcnRpY2xlL3Z1ZS1tb2RlbC1yZWFjdGl2aXR5Ig%2Cs_p7VWWhJvacDXpitv.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_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDpn7~mh4nlvI~ljYDliKUgLSDkuIDntJnlv5jmhoI%2Cc_Article%2Ctitle_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDpn7~mh4nlvI~ljYDliKU%2Cdescription_~VnVlLmpzIOS4reeahCB2LW1vZGVsIOWSjCBtb2RlbC12YWx1ZSDpg73mmK~nlKjmlrzlr6bnj77ooajllq7os4fmlpnpm5nlkJHnuavntZDnmoTmjIfku6TjgII%2CsiteName_~5LiA57SZ5b-Y5oaC%2CsiteHost_www.ikxin.com%2Cp_Ii96aC10dy9hcnRpY2xlL3Z1ZS1tb2RlbC1yZWFjdGl2aXR5Ig%2Cs_p7VWWhJvacDXpitv.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/zh-tw#website","@type":"WebSite","description":"一紙忘憂的個人網站，關於技術探索與日常生活，記錄 Web 開發、後端與 DevOps 實踐，分享軟體工具、數位體驗，以及程式碼之外的見聞與思考。","inLanguage":"zh-TW","name":"一紙忘憂","url":"https://www.ikxin.com/zh-tw","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/zh-tw/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/zh-tw/article/vue-model-reactivity","isPartOf":{"@id":"https://www.ikxin.com/zh-tw#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/zh-tw/article/vue-model-reactivity"]}]}]}
```

## Sitemap

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