A preliminary exploration of v-model of vue 3.0 custom components

<template>
  <div class="home">
    <my-input v-model="inpval" :placeholder="'请输入内容'"></my-input>
    {
   
   {inpval}}
  </div>
</template>

<script>
import {ref} from 'vue'
import myInput from '../components/myInput.vue'
export default {
  name: 'Home',
  setup() {
    const inpval = ref('')
    return{
      inpval
    }
  },
  components: {
    myInput
  }
}
</script>

components

<template>
    <div class=''>
        <input type="text" :placeholder="placeholder" :value="modelValue" @input="inp">
    </div>
</template>

<script>
import {ref,reactive,torefs} from 'vue'
export default {
    props:{
        placeholder:String,
        modelValue:String
    },
    setup(prop,ctx) {
        const inp = (e) =>{
            ctx.emit('update:modelValue',e.target.value)
        }
        return {inp}
    }
};
</script>

<style lang='scss'>

</style>