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

敲代码的77

已于 2023-11-07 20:05:39 修改

阅读量1.2k

点赞数

文章标签： vue.js 前端 javascript

于 2023-10-30 15:43:36 首次发布

本文链接：https://blog.csdn.net/weixin_46687032/article/details/134119931

版权

大家都知道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>