vue妙用v-model，子组件修改父组件的值，实现表单项项双向绑定

本文链接：https://blog.youkuaiyun.com/weixin_46687032/article/details/134119931

本文介绍了在Vue中，由于单向数据流的限制，子组件如何通过`v-model`配合`emit`事件来更新父组件传递的`props`。使用`ref`和`defineProps`,`defineEmits`等API实现子组件值的变化通知父组件进行更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家都知道vue是单项数据流的，子组件不能直接修改父组件传过来的props。那么如何实现子组件修改父组件的值呢。。。

先看下v-model原理

<!-- 父组件 -->
<template>
  <my-component v-model="msg"></my-component>
  <!-- 等同于 -->
  <my-component :modelValue="msg" @update:modelValue="msg = $event"></my-component>
</template>

所以，子组件的值变化了，我们可以通过emit，不是直接修改props,而是通知父组件去修改该值!

修改方法

<!-- 父组件 -->
<template>
  <my-component v-model:modelValue="msg"></my-component>
</template>
<script setup>
import { ref } from 'vue'
const msg = ref('hello')
</script>

<!-- 子组件 -->
<template>
  <el-input :modelValue="modelValue" @change="handleValueChange ""></el-input>
</template>
<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  }
});

const emit = defineEmits(['update:modelValue']);

const handleValueChange = (value) => {
    // 子组件值修改，触发父组件的update:modelValue事件，并将新的值传过去，父组件将msg更新为新的值
    emit('update:modelValue', value)
}
</script>