vue3的v-model

使用场景

• <input>
• <select>
• <textarea>
• components

修饰符

• .lazy ——监听 change 事件而不是 input
• .number ——将输入的合法符串转为数字
• .trim ——移除输入内容两端空格

 在input中使用相当于

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

在组件中使用相当于

<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

v-model的参数,支持多个v-model。默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件

<template>
    {{title}}------{{name}}
    <A  v-model:title="title"  v-model:name="name"></A>
</template>
<script  setup  lang="ts">
import {  ref } from 'vue'
let title=ref('333')
let name=ref('222')
</script>

<template>
      组件A
      <input type="text"  :value="propData.title"  @input="change">
      <input type="text"  :value="propData.name"  @input="changes">
  </template>
  <script  setup  lang="ts">
    import { defineProps ,defineEmits} from 'vue';
    const propData=defineProps({
      title:{
        type:String
      },
      name:{
        type:String
      }
    })

    //必须是update:xx
    const emit=defineEmits(['update:title','update:name'])
    const  change=(e:Event)=>{
      const target = e.target as HTMLInputElement
      emit('update:title',target.value)
    }
    const  changes=(e:Event)=>{
      const target = e.target as HTMLInputElement
      emit('update:name',target.value)
    }
  </script>

v-model支持自定义修饰符

组件的 v-model 上所添加的修饰符，可以通过 modelModifiers prop 在组件内访问到。

<template>
    <A  v-model.change="title" ></A>
</template>
<script  setup  lang="ts">
import {  ref } from 'vue'

let title=ref('2')

</script>

<template>
      组件A
      <input type="text"  :value="propData.title"  @input="change">
  </template>
  <script  setup  lang="ts">
    import { defineProps } from 'vue';
    const propData=defineProps({
      title:{
        type:String
      },
      modelModifiers?: {
        default: () => ({})
      }
    })
    const change=()=>{
      if(propData.modelModifiers.change){
        console.log('999')
      }
      console.log('wu')
    }
  </script>

对于又有参数又有修饰符的 v-model 绑定，生成的 prop 名将是 arg + "Modifiers"。