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