Vue3中父子组件的v-model双向绑定

以最简单的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事件的回调函数