Vue3中父子组件的v-model双向绑定_vue3 v-model 父子双向绑定-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41862017/article/details/124799273

本文介绍了Vue中父组件如何通过`MInput`组件的`v-model`与子组件的`input`事件实现数据双向绑定，并强调了在子组件中使用`defineEmits`确保数据更新传递给父组件的重要性。

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

以最简单的input组件为例，父组件：

<template>
  <div>
    <MInput v-model="fNumber" @input="changeFNumber"/>
  </div>
</template>

<script setup>
import { ref } from "vue";
import MInput from './input.vue'
const fNumber = ref('23424') // v-model绑定的变量，并赋予初始值
function changeFNumber(e) { // 子组件提供的回调事件
  console.log(fNumber.value)
}
</script>

子组件：

<template>
  <input v-model="inputData" @input="changeVal">
</template>
<script setup>
import {ref, defineProps, defineEmits, watch} from 'vue'
let props = defineProps({
  modelValue: String
})
let emits = defineEmits(['update:modelValue', 'changeVal'])
const inputData = ref(props.modelValue)
const changeVal = (e) => {
  console.log(inputData.value)
  emits('update:modelValue', e.target.value)
}
watch(() => { //因为是双向绑定，所以用watch也可以监听到数据变化
  console.log(fNumber.value)
})
</script>

子组件中通过defineEmits保证在input的数值更新时父组件可以通过@input接收到数据的变化，值得注意的是如果在子组件中定义的是input事件，那父组件只能监听到input事件，如果想通过change事件监听的话只能在子组件中也加一个change事件的回调函数