Vue 3 中父子組件雙向綁定的 4 種方式(最新推薦)
更新時間：2025年07月11日 10:02:30 作者：JaysonJin
本文介紹了Vue3中實現(xiàn)父子組件雙向綁定的四種方式并對比了各自適用場景與優(yōu)缺點,每種方式結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧
?? Vue 3 中父子組件雙向綁定的 4 種方式
? 場景說明
- 父組件希望將某個值傳遞給子組件，同時希望子組件能夠修改這個值（實現(xiàn)“綁定 + 反向更新”）。
- 類似于 v-model 的使用效果。
?? 方式一：使用 v-model + modelValue + emit("update:modelValue")
? 推薦：官方支持、語義清晰、適用于表單類組件
子組件寫法：
<!-- components/MyInput.vue -->
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script setup>
defineProps({
modelValue: String
})
defineEmits(['update:modelValue'])
</script>父組件用法：
<MyInput v-model="username" />
?? 方式二：自定義 v-model:xxx 實現(xiàn)多個綁定值
? 多值綁定場景適用，例如表單組件同時綁定 value 和 checked
子組件：
<template>
<input
:value="modelValue"
:checked="checked"
@input="$emit('update:modelValue', $event.target.value)"
@change="$emit('update:checked', $event.target.checked)"
/>
</template>
<script setup>
defineProps(['modelValue', 'checked'])
defineEmits(['update:modelValue', 'update:checked'])
</script>父組件：
<MyInput v-model:modelValue="text" v-model:checked="isChecked" />
?? 方式三：使用 v-bind + @update + defineModel（Vue 3.3+）
?? 僅支持 Vue 3.3 及以上版本！
子組件：
<script setup> const model = defineModel<string>() // 等價于 props + emit </script> <template> <input :value="model" @input="model = $event.target.value" /> </template>
父組件：
<MyInput v-model="msg" />
?? 不用顯式聲明 props 和 emits，推薦新項目使用！
?? 方式四：手動通過 props + emit 自定義字段實現(xiàn)綁定
? 適合非表單類組件 / 業(yè)務(wù)交互邏輯強的組件
子組件：
<template>
<button @click="toggle">{{ active ? 'ON' : 'OFF' }}</button>
</template>
<script setup>
const props = defineProps({ active: Boolean })
const emit = defineEmits(['update:active'])
const toggle = () => {
emit('update:active', !props.active)
}
</script>父組件：
<MyToggle v-model:active="isActive" />
?? 小結(jié)對比表
| 方式 | 特點 | 場景建議 |
|---|---|---|
v-model + modelValue | 最常用，官方推薦 | 表單組件 |
v-model:xxx 多 model | 綁定多個值 | 復(fù)合組件（如 input + checked） |
defineModel() | Vue 3.3+ 自動綁定 | 新項目、輕量雙綁組件 |
| props + emit 自定義字段 | 自定義靈活 | 任意雙向控制場景 |
? 補充：實現(xiàn)“子改父”但不一定是“綁定”
- 子組件調(diào)用函數(shù)修改父組件數(shù)據(jù)：
<!-- 父組件 -->
<MyChild :value="count" @change="count = $event" />
<!-- 子組件 -->
$emit('change', newValue)- 父傳
ref，子組件直接修改ref.value（不推薦頻繁使用）
到此這篇關(guān)于Vue 3 中父子組件雙向綁定的 4 種方式的文章就介紹到這了,更多相關(guān)Vue 3 父子組件雙向綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 父組件獲取子組件里面的data數(shù)據(jù)(實現(xiàn)步驟)
在Vue中,父組件可以通過`ref`引用子組件,并通過`$refs`屬性來訪問子組件的數(shù)據(jù),下面分步驟給大家介紹vue 父組件獲取子組件里面的data數(shù)據(jù),感興趣的朋友一起看看吧2024-06-06
本篇文章主要介紹了淺談vuepress 踩坑記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例
這篇文章主要介紹了vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本文主要介紹了vue3.0中使用element UI表單遍歷校驗問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue動態(tài)設(shè)置圖片時src不生效的原因及解決方法
這篇文章主要介紹了Vue動態(tài)設(shè)置圖片時src不生效的原因及解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了如何在Vue項目中添加接口監(jiān)聽遮罩,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue進階之利用transition標(biāo)簽實現(xiàn)頁面跳轉(zhuǎn)動畫
這篇文章主要為大家詳細介紹了Vue如何利用transition標(biāo)簽實現(xiàn)頁面跳轉(zhuǎn)動畫，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起一下2023-08-08
這篇文章主要介紹了在vue中使用公共過濾器filter的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
Vue實現(xiàn)側(cè)邊導(dǎo)航欄于Tab頁關(guān)聯(lián)的示例代碼
本文主要介紹了Vue實現(xiàn)側(cè)邊導(dǎo)航欄于Tab頁關(guān)聯(lián)的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結(jié)構(gòu)，el-tree組件中filter-node-method事件便可以實現(xiàn)樹形菜單篩選過濾功能，需要的朋友可以參考下2022-04-04