父组件使用v-model,子组件在props中用value接值,子组件用input(默认事件名),将子组件更新的值传给父组件。(可在model中修改事件名)
//父组件 parent.vue
<child v-model="inputVal">
<script>
export default {
data(){
return {
inputVal:null
}
}
}
</script>
//子组件 child
<template>
<view>
<input
:value="value"
placeholder="123"
@input="handleInput"
>
</view>
</template>
<script>
export default {
props: {
value: {
type: String,
default: '',
},
},
model:{
event :'updateValue'
},
methods: {
handleInput(e) {
//事件名默认input,
this.$emit('input', e.target.value);
//若在model中修改了事件名,在方法中使用修改的名
//this.$emit('updateValue',e.target.value)
},
},
};
</script>