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