Vue 3 中父子組件雙向綁定的 4 種方式(最新推薦)
更新時(shí)間：2025年07月11日 10:02:30 作者：JaysonJin
本文介紹了Vue3中實(shí)現(xiàn)父子組件雙向綁定的四種方式并對(duì)比了各自適用場(chǎng)景與優(yōu)缺點(diǎn),每種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
?? Vue 3 中父子組件雙向綁定的 4 種方式
? 場(chǎng)景說(shuō)明
- 父組件希望將某個(gè)值傳遞給子組件，同時(shí)希望子組件能夠修改這個(gè)值（實(shí)現(xiàn)“綁定 + 反向更新”）。
- 類似于 v-model 的使用效果。
?? 方式一：使用 v-model + modelValue + emit("update:modelValue")
? 推薦：官方支持、語(yǔ)義清晰、適用于表單類組件
子組件寫法：
<!-- 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 實(shí)現(xiàn)多個(gè)綁定值
? 多值綁定場(chǎng)景適用，例如表單組件同時(shí)綁定 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>() // 等價(jià)于 props + emit </script> <template> <input :value="model" @input="model = $event.target.value" /> </template>
父組件：
<MyInput v-model="msg" />
?? 不用顯式聲明 props 和 emits，推薦新項(xiàng)目使用！
?? 方式四：手動(dòng)通過(guò) props + emit 自定義字段實(shí)現(xiàn)綁定
? 適合非表單類組件 / 業(yè)務(wù)交互邏輯強(qiáng)的組件
子組件：
<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é)對(duì)比表
| 方式 | 特點(diǎn) | 場(chǎng)景建議 |
|---|---|---|
v-model + modelValue | 最常用，官方推薦 | 表單組件 |
v-model:xxx 多 model | 綁定多個(gè)值 | 復(fù)合組件（如 input + checked） |
defineModel() | Vue 3.3+ 自動(dòng)綁定 | 新項(xiàng)目、輕量雙綁組件 |
| props + emit 自定義字段 | 自定義靈活 | 任意雙向控制場(chǎng)景 |
? 補(bǔ)充：實(shí)現(xiàn)“子改父”但不一定是“綁定”
- 子組件調(diào)用函數(shù)修改父組件數(shù)據(jù)：
<!-- 父組件 -->
<MyChild :value="count" @change="count = $event" />
<!-- 子組件 -->
$emit('change', newValue)- 父?jìng)?
ref，子組件直接修改ref.value（不推薦頻繁使用）
到此這篇關(guān)于Vue 3 中父子組件雙向綁定的 4 種方式的文章就介紹到這了,更多相關(guān)Vue 3 父子組件雙向綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在vue中created、mounted等方法使用小結(jié)
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue使用自定義指令實(shí)現(xiàn)一鍵復(fù)制功能
在Vue中,通過(guò)自定義指令v-copy和document.execCommand方法,可以實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪貼板的功能,適用于處理長(zhǎng)文本或多行文本的復(fù)制需求,而readonly屬性可避免內(nèi)容被修改和移動(dòng)設(shè)備上的虛擬鍵盤干擾,感興趣的朋友一起看看吧2024-09-09
手動(dòng)實(shí)現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理詳解
這篇文章主要給大家介紹了關(guān)于手動(dòng)實(shí)現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
利用Vue-cli搭建Vue項(xiàng)目框架的教程詳解
這篇文章主要為大家詳細(xì)介紹了利用Vue-cli搭建Vue項(xiàng)目框架的相關(guān)資料，對(duì)大家深入了解Vue有一定的幫助，感興趣的小伙伴可以了解一下2023-02-02
Vant的安裝和配合引入Vue.js項(xiàng)目里的方法步驟
這篇文章主要介紹了Vant的安裝和配合引入Vue.js項(xiàng)目里的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
element-ui中導(dǎo)航組件menu的一個(gè)屬性:default-active說(shuō)明
這篇文章主要介紹了element-ui中導(dǎo)航組件menu的一個(gè)屬性:default-active說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
詳解如何使用Vuex實(shí)現(xiàn)Vue后臺(tái)管理中的角色鑒權(quán)
最近參與了公司一個(gè)新的B端項(xiàng)目的研發(fā),從無(wú)到有搭建項(xiàng)目的過(guò)程中,遇到了關(guān)于項(xiàng)目鑒權(quán)的問(wèn)題,這篇文章主要給大家介紹了關(guān)于如何使用Vuex實(shí)現(xiàn)Vue后臺(tái)管理中的角色鑒權(quán)的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue實(shí)現(xiàn)導(dǎo)出excel的多種方式總結(jié)
在Vue中實(shí)現(xiàn)導(dǎo)出Excel有多種方式,可以通過(guò)前端實(shí)現(xiàn),也可以通過(guò)前后端配合實(shí)現(xiàn),這篇文章將為大家詳細(xì)介紹幾種常用的實(shí)現(xiàn)方式,需要的可以參考下2023-08-08
用v-html解決Vue.js渲染中html標(biāo)簽不被解析的問(wèn)題
這篇文章主要給大家介紹了如何利用v-html解決Vue.js渲染過(guò)程中html標(biāo)簽不能被解析，html標(biāo)簽顯示為字符串的問(wèn)題，文中通過(guò)圖文介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-12-12
Vue-cli框架實(shí)現(xiàn)計(jì)時(shí)器應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue-cli框架實(shí)現(xiàn)計(jì)時(shí)器應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08