VUE3：深入浅出双向传值的历史用法变化

什么是双向绑定？

双向绑定就是：父组件的数据变了，子组件跟着变；子组件修改了，父组件也跟着变。就像两个人拉着同一根绑带，一个人动，另一个人也跟着动。

演变历史

Vue 2 → Vue 3.0~3.3 → Vue 3.4+ v-model defineEmits + defineModel .sync修饰符 defineProps (超级简化!)

方式一：Vue 3.4 之前的写法（defineEmits + defineProps）

这是"传统"写法，需要分别定义 props 接收和 emit 发送。

父组件

<template> <div class="parent"> <h2>👨 父组件 - Vue 3.4 之前的双向绑定</h2> <p>父组件的 message: {{ message }}</p> <!-- v-model 是语法糖，等价于： :modelValue="message" @update:modelValue="val => message = val" --> <ChildOldWay v-model="message" /> <!-- 多个 v-model 的写法 --> <ChildOldWay v-model:title="title" v-model:content="content" /> </div> </template> <script setup> import { ref } from 'vue' import ChildOldWay from './ChildOldWay.vue' const message = ref('Hello Vue!') const title = ref('文章标题') const content = ref('文章内容') </script>

子组件（旧写法）

<template> <div class="child"> <h3>👶 子组件 - 旧写法</h3> <!-- 显示从父组件接收的值 --> <p>接收到的值: {{ modelValue }}</p> <!-- 子组件不能直接修改 props！ 需要通过 emit 通知父组件修改 --> <input :value="modelValue" @input="updateValue" placeholder="输入新值" /> <button @click="emit('update:modelValue', '被子组件修改了')"> 直接修改 </button> </div> </template> <script setup> // ========== 第一步：用 defineProps 接收父组件的值 ========== const props = defineProps({ // v-model 默认绑定的 prop 名是 modelValue modelValue: { type: String, default: '' }, // 自定义名称的 v-model，如 v-model:title title: String, content: String }) // ========== 第二步：用 defineEmits 定义事件 ========== // 事件名必须是 'update:属性名' 的格式 const emit = defineEmits([ 'update:modelValue', // 对应 v-model 'update:title', // 对应 v-model:title 'update:content' // 对应 v-model:content ]) // ========== 第三步：通过 emit 通知父组件更新 ========== const updateValue = (event) => { // 发射事件，让父组件更新数据 emit('update:modelValue', event.target.value) } </script>

方式二：Vue 3.4+ 新写法（defineModel）🎉

Vue 3.4 引入了defineModel，大大简化了双向绑定的代码！

父组件（和之前一样）

<template> <div class="parent"> <h2>👨 父组件 - Vue 3.4+ 新写法</h2> <p>父组件的 message: {{ message }}</p> <p>父组件的 count: {{ count }}</p> <!-- 用法和之前完全一样 --> <ChildNewWay v-model="message" v-model:count="count" /> </div> </template> <script setup> import { ref } from 'vue' import ChildNewWay from './ChildNewWay.vue' const message = ref('Hello Vue 3.4!') const count = ref(0) </script>

子组件（新写法 - 超级简化！）

<template> <div class="child"> <h3>👶 子组件 - Vue 3.4+ defineModel</h3> <!-- model 就像一个普通的 ref，可以直接读写！ 不需要 :value + @input，直接 v-model 绑定 --> <input v-model="model" placeholder="直接双向绑定" /> <p>当前值: {{ model }}</p> <!-- 多个 model 也很简单 --> <button @click="count++">count: {{ count }}</button> </div> </template> <script setup> // ======================================== // Vue 3.4+ 的 defineModel：一行搞定！ // ======================================== // 默认的 v-model // defineModel() 返回一个 ref，可以直接读写 const model = defineModel() // 带名称的 v-model:count const count = defineModel('count') // 带类型和默认值 // const model = defineModel({ type: String, default: '默认值' }) // 就这么简单！ // - 不需要 defineProps // - 不需要 defineEmits // - 不需要手动 emit // - 直接读写就能双向绑定 </script>

对比总结

<!-- ❌ Vue 3.4 之前：繁琐 --> <script setup> const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) // 使用时：emit('update:modelValue', newValue) </script> <!-- ✅ Vue 3.4+ 之后：简洁 --> <script setup> const model = defineModel() // 使用时：model.value = newValue（直接赋值！） </script>