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中created、mounted等方法使用小結(jié)
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在Vue中,通過自定義指令v-copy和document.execCommand方法,可以實現(xiàn)點擊按鈕復(fù)制內(nèi)容到剪貼板的功能,適用于處理長文本或多行文本的復(fù)制需求,而readonly屬性可避免內(nèi)容被修改和移動設(shè)備上的虛擬鍵盤干擾,感興趣的朋友一起看看吧2024-09-09
手動實現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理詳解
這篇文章主要給大家介紹了關(guān)于手動實現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2021-02-02
這篇文章主要為大家詳細介紹了利用Vue-cli搭建Vue項目框架的相關(guān)資料，對大家深入了解Vue有一定的幫助，感興趣的小伙伴可以了解一下2023-02-02
這篇文章主要介紹了Vant的安裝和配合引入Vue.js項目里的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
element-ui中導(dǎo)航組件menu的一個屬性:default-active說明
這篇文章主要介紹了element-ui中導(dǎo)航組件menu的一個屬性:default-active說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
詳解如何使用Vuex實現(xiàn)Vue后臺管理中的角色鑒權(quán)
最近參與了公司一個新的B端項目的研發(fā),從無到有搭建項目的過程中,遇到了關(guān)于項目鑒權(quán)的問題,這篇文章主要給大家介紹了關(guān)于如何使用Vuex實現(xiàn)Vue后臺管理中的角色鑒權(quán)的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue實現(xiàn)導(dǎo)出excel的多種方式總結(jié)
在Vue中實現(xiàn)導(dǎo)出Excel有多種方式,可以通過前端實現(xiàn),也可以通過前后端配合實現(xiàn),這篇文章將為大家詳細介紹幾種常用的實現(xiàn)方式,需要的可以參考下2023-08-08
用v-html解決Vue.js渲染中html標簽不被解析的問題
這篇文章主要給大家介紹了如何利用v-html解決Vue.js渲染過程中html標簽不能被解析，html標簽顯示為字符串的問題，文中通過圖文介紹的很詳細，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要為大家詳細介紹了Vue-cli框架實現(xiàn)計時器應(yīng)用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08