vue3 input双向绑定与父子组件传值
vue3自我总结1.在子组件定义input输入框实现双向绑定,在父组件显示1.1在父组件的标签上用v-model定义变量值。1.1.1<compositionapi v-model='sex02'v-model:age="age02" v-model:name="name02" @test="getData" :keywords="keywords"></composition
·
vue3自我总结
1.在子组件定义input输入框实现双向绑定,在父组件显示
1.1在父组件的标签上用v-model定义变量值。
1.1.1
<compositionapi v-model='sex02' v-model:age="age02" v-model:name="name02" @test="getData" :keywords="keywords"></compositionapi>
第一种是如sex02这样一般的写法,
第二种则是age02,name02这种写法。
1.2在子组件中
1.2.1
通过props接受父组件中的name,age,由于sex没有具体变量指向,所以可以通过modelValue指向。
props: [
'age',
'name',
'modelValue'
],
1.2.2
在子组件的input框中,用:value可以与父组件传过来的props做绑定,然后再setup函数中定义input框的@input事件
<input type="text" :value="age" @input="onAgeInput"/>
<br>
<input type="text" :value="name" @input="onNameInput"/>
<br>
<input type="text" :value="modelValue" @input="onSexInput">
setup(props,context){
function onAgeInput(e){
return context.emit('update:age', parseFloat(e.target.value));
}
function onNameInput(e){
return context.emit('update:name', e.target.value)
}
function onSexInput(e){
return context.emit('update:modelValue', e.target.value)
}
return{
onAgeInput,
onNameInput,
onSexInput
}
},
1.3在父组件中生命变量接收传过来的值
setup(){
let age02 = ref(1111)
let sex02 = ref('nan')
return{
age02,
sex02
}
},
更多推荐
已为社区贡献2条内容
所有评论(0)