快捷導(dǎo)航

vue父子組件之間如何通過(guò)v-model傳值

更新時(shí)間：2026年03月28日 08:40:03 作者：改了一個(gè)昵稱

這篇文章主要介紹了vue父子組件之間如何通過(guò)v-model傳值的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

?vue父子組件之間通過(guò)v-model傳值

子組件，可以使用 `modelValue` 來(lái)接收通過(guò) `v-model` 傳遞的數(shù)據(jù)，`modelValue` 是 `v-model` 在子組件內(nèi)部的一個(gè)特殊屬性，用于雙向綁定傳遞的數(shù)據(jù)。

在Vuejs中，`v-model`用于實(shí)現(xiàn)表單元素的雙向數(shù)據(jù)綁定，它實(shí)際上創(chuàng)建了一個(gè)名為`modelValue`的prop，并在子組件內(nèi)部自動(dòng)將這個(gè)prop更新為與父組件的數(shù)據(jù)保持同步，這是基于Vue的編譯時(shí)行為和指令的實(shí)現(xiàn)。

如果，你使用一個(gè)不同的變量名來(lái)接收`v-model`傳遞的值，那么父組件中的數(shù)據(jù)將無(wú)法正確的綁定到子組件中，這是因?yàn)椋琡v-model`在內(nèi)部使用`modelValue`這個(gè)特殊的prop名，來(lái)維護(hù)雙向數(shù)據(jù)綁定的，

因此，為了保證數(shù)據(jù)的正確傳遞，子組件中用于接收父組件傳遞的值的變量名必須是`modelValue`，而不能是別的名字。

在Vue.js中，使用v-model指令可以在父組件和子組件之間建立雙向數(shù)據(jù)綁定，這種雙向綁定的實(shí)現(xiàn)依賴于子組件內(nèi)部的 modelValue 屬性，這是一個(gè)特殊的屬性名，用于在子組件中接收來(lái)自父組件的數(shù)據(jù)，并在內(nèi)部維護(hù)這個(gè)數(shù)據(jù)的狀態(tài)。

下面我將詳細(xì)解釋一下父子組件使用 v-model 傳遞數(shù)據(jù)的過(guò)程：

1、在父組件中

使用 v-model 指令將數(shù)據(jù)綁定到子組件上，如：

<template>
  <ChildComponent v-model="parentData" />
</template>

<script>
export default {
  data() {
    return {
      parentData: 'initial value'
    }
  }
}
</script>

2、在子組件中

接收來(lái)自父組件的數(shù)據(jù)，并使用modelValue屬性來(lái)維護(hù)這個(gè)數(shù)據(jù)的狀態(tài)，如：

<template>
  <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
export default {
  props: {
    modelValue: String
  }
}
</script>

在子組件中，modelValue是一個(gè)特殊的 prop 名稱，用于接收來(lái)自父組件的數(shù)據(jù)，

同時(shí)，子組件內(nèi)部的輸入框使用 :value 綁定到 modelValue，并通過(guò) @input 事件觸發(fā) update:modelValue 事件，將輸入框的值傳遞給父組件。

這樣，當(dāng)父組件中的數(shù)據(jù)發(fā)生變化時(shí)，子組件中的輸入框會(huì)同步更新，

反之，當(dāng)子組件中的輸入框的值發(fā)生變化時(shí)，父組件中的數(shù)據(jù)也會(huì)同步更新，

這就是v-model在父子組件之間實(shí)現(xiàn)雙向數(shù)據(jù)綁定的過(guò)程