<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>
组件
<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>