咱来聊聊Vue 3中，父子组件之间搞点双向数据绑定，那叫一个方便啊。你懂的，之前那些方法，有点儿麻烦。现在有了新的东西，咱就简单点。哈哈，说实话，这可真是不容易。

一、简要介绍

你kan，Vue 3的父子组件间用`v-model`传值，那叫一个直观。咱就是说父组件给子组件传递数据，子组件修改数据，父组件也Neng实时反映出来。你懂的？这简直是开发效率提升了好几档子。

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

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

关键点：

import { ref, watch } from 'vue'
const props = defineProps({
    count: {
        type: Number,
        default: ,  },
})
const emit = defineEmits
const count = refwatch => {
    emit
})

方法2：使用 computed

import { computed } from 'vue'
const props = defineProps({
    count: {
        type: Number,
        default: ,  },
})
const emit = defineEmits
const count = computed => props.count, set:  => emit,})

二、核心原理

你kan啊，`v-model` 它其实是在Zuo了两件事。第一件事是把子组件里的一个输入框和父组件里的一个响应式数据关联起来。第二件事是当子组件里的值改变的时候，就会自动通知父组件的数据也改变。

三、不同类型的传值

咱要分两种情况考虑：一是普通类型的传值；二是引用类型的传值。

方法1：引用类型传值

引用类型啊…就像你手里拿着个盒子一样。盒子里面装着东西。你把这个盒子给别人了以后别人再往盒子里放东西了呢？你的盒子里还是原来的东西吗？嘿嘿…

import { ref, watch } from 'vue'
const props = defineProps => ,  },})  //定义props对象--接收来自父级传递的对象作为参数   const emit = defineEmits //定义 emits 函数--用于在子组件geng新数据时触发事件   const obj = ref //创建ref对象--用来存储当前对象的数值   watch => {    emit  },  { deep: true },) //使用watch函数监听对象的变化--deep为true表示深度监听   

`deep`: true ，这个参数hen重要啊！它告诉 Vue 要对对象里面的所有属性也进行监听。不然的话你只Neng监听 `obj` 这个对象本身的变化。

方法2：使用 defineModel

interface Obj {  count: number} //定义接口--定义对象的结构   const obj = defineModel<Obj> //使用defineModel函数来定义对象--并将其绑定到 props 中

`defineModel` 是 Vue 3 新出的一个非常棒的功Neng！它Neng自动处理hen多事情。 比如 你定义了一个对象类型，然后用 `defineModel` 来声明这个对象作为 props 的值。那么 Vue 会自动帮你处理数据的geng新和同步。 这比手动写 `watch` 和 `emit` 要方便多了！ 而且性Neng也geng好哦。

四、Zui佳实践建议

. 优先使用 defineModel

Vue + 版本推荐使用 defineModel

代码geng简洁，性Nenggeng好

自动处理 props 和 emit

. 引用类型处理

对于对象类型，使用 defineModel 配合 TypeScript 接口

确保类型安全，提供geng好的开发体验

. 命名规范

v-model 的自定义名称应该语义化

如 v-model:userInfov-model:formData 等

. 类型定义

使用 TypeScript 接口定义复杂对象类型

提供geng好的代码提示和类型检查

五、实际应用示例

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

父组件传递：

<Child v-model:obj="obj" />

子组件接收：

<input type="text" class="border" v-model="obj.count" />

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

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

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

希望这些信息对你有帮助！要是还有啥问题尽管问我哈！哈哈～

---