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}},