vue 3.0 自定义组件中的input事件双向数据绑定

<template>
    <div class = 'home'>
        <v-input v-model:keyword="keyword"></v-input>
        <br>
        {{keyword}}
    </div>
</template>

<script>
    import NetInput from './netInput';
    export default{
        data(){
            return{
                 keyword:'',
            }
        },
        components:{
            'v-input':NetInput,
        }
    }
</script>

<template>

<input type="text" :value="keyword" @input="$emit('update:keyword',$event.target.value)" placeholder="请输入内容"/>

</template>

<script>
export default {
     props:['keyword']
}
</script>

<style>
input{
    width:400px;
    height:32px;
    line-height: 32px;
}
</style>