vue3 父子组件v-model传值方法总结

Vue父子组件v-model传值交互总结

概述

总结了Vue 3中父子组件之间使用v-model进行数据双向绑定的各种实现方式,包括普通类型和引用类型的处理。

文件结构

  • demo.vue - 父组件,使用v-model向子组件传递数据
  • child.vue - 子组件,接收父组件数据并支持双向绑定

父组件实现 (demo.vue)

vue 复制代码
<template>
  <div class="p-100px">
    <h1>{{ obj.count }}</h1>
    // 引用类型
    <Child v-model:obj="obj" />
    // 普通类型
    <Child v-model:count="count" />
  </div>
</template>

<script setup lang="ts">
import Child from '@/views/components/child.vue'
import { ref } from 'vue'

const count = ref(0)
const obj = ref({
  count: 0,
})
</script>

关键点:

  • 使用 v-model:obj="obj" 语法向子组件传递对象
  • 父组件维护响应式数据 obj

子组件实现方式

普通类型传值

方法1:使用 ref + watch
typescript 复制代码
import { ref, watch } from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0,
  },
})
const emit = defineEmits(['update:count'])
const count = ref(props.count)

watch(count, (newVal) => {
  emit('update:count', newVal)
})
方法2:使用 computed
typescript 复制代码
import { computed } from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0,
  },
})
const emit = defineEmits(['update:count'])
const count = computed({
  get: () => props.count,
  set: (value) => emit('update:count', value),
})
方法3:使用 defineModel (推荐)
typescript 复制代码
const count = defineModel('count')
方法4:使用 @vueuse/core
typescript 复制代码
import { useVModel } from '@vueuse/core'
const props = defineProps({
  count: {
    type: Number,
    default: 0,
  },
})
const count = useVModel(props, 'count')

引用类型传值

方法1:使用 ref + watch (深度监听)
typescript 复制代码
import { ref, watch } from 'vue'
const props = defineProps({
  obj: {
    type: Object,
    default: () => ({}),
  },
})
const emit = defineEmits(['update:obj'])
const obj = ref(props.obj)

watch(
  obj,
  (newVal) => {
    emit('update:obj', newVal)
  },
  { deep: true },
)
方法2:使用 defineModel (推荐)
typescript 复制代码
interface Obj {
  count: number
}

const obj = defineModel<Obj>('obj')

最佳实践建议

1. 优先使用 defineModel

  • Vue 3.4+ 版本推荐使用 defineModel
  • 代码更简洁,性能更好
  • 自动处理 props 和 emit

2. 引用类型处理

  • 对于对象类型,使用 defineModel 配合 TypeScript 接口
  • 确保类型安全,提供更好的开发体验

3. 命名规范

  • v-model 的自定义名称应该语义化
  • v-model:userInfov-model:formData

4. 类型定义

  • 使用 TypeScript 接口定义复杂对象类型
  • 提供更好的代码提示和类型检查

实际应用示例

当前项目中的实现展示了引用类型的双向绑定:

父组件传递:

vue 复制代码
<Child v-model:obj="obj" />

子组件接收:

vue 复制代码
<input type="text" class="border" v-model="obj.count" />

这种方式允许子组件直接修改父组件传递的对象属性,实现真正的双向数据绑定。

总结

Vue 3 提供了多种方式实现父子组件的双向数据绑定:

  1. defineModel - 最推荐的方式,简洁高效
  2. computed - 适合需要额外逻辑处理的场景
  3. ref + watch - 传统方式,适合复杂场景
  4. @vueuse/core - 第三方库,提供更多功能

选择合适的方式取决于具体需求和项目复杂度,但建议优先考虑 defineModel 方式。

相关推荐
java水泥工2 小时前
网上摄影工作室|基于SpringBoot和Vue的网上摄影工作室(源码+数据库+文档)
数据库·vue.js·spring boot
IT_陈寒2 小时前
JavaScript性能优化:这7个V8引擎技巧让我的应用速度提升了50%
前端·人工智能·后端
学渣y2 小时前
nvm下载node版本,npm -v查看版本报错
前端·npm·node.js
excel2 小时前
首屏加载优化总结
前端
花花鱼2 小时前
vxe-grid在树形模式下通过$grid.getTableData().fullData无法获取到所有数据的简单处理
vue.js
敲代码的嘎仔2 小时前
JavaWeb零基础学习Day1——HTML&CSS
java·开发语言·前端·css·学习·html·学习方法
Tachyon.xue4 小时前
Vue 3 项目集成 Element Plus + Tailwind CSS 详细教程
前端·css·vue.js
FuckPatience5 小时前
Vue 中‘$‘符号含义
前端·javascript·vue.js
东风西巷7 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·电脑·音视频·软件需求
超级大只老咪8 小时前
何为“类”?(Java基础语法)
java·开发语言·前端