Vue 3 中父子组件双向绑定的 4 种方式(最新推荐)
更新时间：2025年07月11日 10:02:30 作者：JaysonJin
本文介绍了Vue3中实现父子组件双向绑定的四种方式并对比了各自适用场景与优缺点,每种方式结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
🔁 Vue 3 中父子组件双向绑定的 4 种方式
✅ 场景说明
- 父组件希望将某个值传递给子组件，同时希望子组件能够修改这个值（实现“绑定 + 反向更新”）。
- 类似于 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 实现多个绑定值
✅ 多值绑定场景适用，例如表单组件同时绑定 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 自定义字段实现绑定
✅ 适合非表单类组件 / 业务交互逻辑强的组件
子组件：
<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" />
🧠 小结对比表
| 方式 | 特点 | 场景建议 |
|---|---|---|
v-model + modelValue | 最常用，官方推荐 | 表单组件 |
v-model:xxx 多 model | 绑定多个值 | 复合组件（如 input + checked） |
defineModel() | Vue 3.3+ 自动绑定 | 新项目、轻量双绑组件 |
| props + emit 自定义字段 | 自定义灵活 | 任意双向控制场景 |
✅ 补充：实现“子改父”但不一定是“绑定”
- 子组件调用函数修改父组件数据：
<!-- 父组件 -->
<MyChild :value="count" @change="count = $event" />
<!-- 子组件 -->
$emit('change', newValue)- 父传
ref，子组件直接修改ref.value（不推荐频繁使用）
到此这篇关于Vue 3 中父子组件双向绑定的 4 种方式的文章就介绍到这了,更多相关Vue 3 父子组件双向绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了在vue中created、mounted等方法使用小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
在Vue中,通过自定义指令v-copy和document.execCommand方法,可以实现点击按钮复制内容到剪贴板的功能,适用于处理长文本或多行文本的复制需求,而readonly属性可避免内容被修改和移动设备上的虚拟键盘干扰,感兴趣的朋友一起看看吧2024-09-09
这篇文章主要给大家介绍了关于手动实现vue2.0的双向数据绑定原理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要为大家详细介绍了利用Vue-cli搭建Vue项目框架的相关资料，对大家深入了解Vue有一定的帮助，感兴趣的小伙伴可以了解一下2023-02-02
这篇文章主要介绍了Vant的安装和配合引入Vue.js项目里的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
element-ui中导航组件menu的一个属性:default-active说明
这篇文章主要介绍了element-ui中导航组件menu的一个属性:default-active说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最近参与了公司一个新的B端项目的研发,从无到有搭建项目的过程中,遇到了关于项目鉴权的问题,这篇文章主要给大家介绍了关于如何使用Vuex实现Vue后台管理中的角色鉴权的相关资料,需要的朋友可以参考下2022-05-05
在Vue中实现导出Excel有多种方式,可以通过前端实现,也可以通过前后端配合实现,这篇文章将为大家详细介绍几种常用的实现方式,需要的可以参考下2023-08-08
用v-html解决Vue.js渲染中html标签不被解析的问题
这篇文章主要给大家介绍了如何利用v-html解决Vue.js渲染过程中html标签不能被解析，html标签显示为字符串的问题，文中通过图文介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要为大家详细介绍了Vue-cli框架实现计时器应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论