vue3 组件使用 v-model

v-model 的参数

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。

<!-- 子组件 child-component.vue-->
<template>
    <div>
        <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
    </div>
</template>
<script>
    export default {
        props: {
            modelValue: {
                type: String,
                default: '',
            }
        },
    }
</script>

父组件使用子组件： <child-component v-model=“xxx”></child-component>

我们可以通过向 v-model 传递参数来修改这些名称（如title）：

<!-- 子组件 child-component.vue-->
<template>
    <div>
        <input type="text" :value="title" @input="$emit('update:title', $event.target.value)">
    </div>
</template>
<script>
    export default {
        props: {
            title: {
                type: String,
                default: '',
            }
        },
    }
</script>

此时父组件使用子组件： <child-component v-model:title=“xxx”></child-component>

多个 v-model 绑定

<!-- 子组件 my-input.vue -->
<template>
  <div>
    <div>姓名：<input type="text" :value="firstValue" @input="$emit('update:firstValue', $event.target.value)"></div>
    <div>笔名：<input type="text" :value="secondValue" @input="handleInput"></div>
  </div>
</template>
<script>
  export default {
    props: {
      firstValue: {
        type: String,
        default: '',
      },
      secondValue: {
        type: String,
        default: '',
      }
    },
    setup(props, context) {
      const handleInput = e => {
        context.emit('update:secondValue', e.target.value)
      }
      return { handleInput }
    }
  }
</script>

<!-- 父组件 -->
<template>
    <div>
      <!--第一种写法-->
      <my-input v-model:firstValue="value1" v-model:secondValue="value2"></my-input>
      <!--第二种写法-->
      <my-input :firstValue="value1" @update:firstValue="value1=$event" :secondValue="value2" @update:secondValue="value2=$event "></my-input>
    </div>
</template>
<script>
    import MyInput from '@/components/my-input'
    import { ref } from 'vue'
    export default {
        components: {
          MyInput
        },
        setup() {
        	const value1 = ref('vue3.0 v-model的使用')
        	const value2 = ref('默认值')
            return {
                value1,
                value2
            }
        },
    }
</script>

v-model 修饰符

v-model 的修饰符将通过 modelModifiers prop 提供给组件

<!-- 子组件 my-input.vue -->
<template>
  <div>
    <div>输入框：<input type="text" :value="modelValue" @input="handleEmit"></div>
  </div>
</template>
<script>
  import { toRefs } from 'vue'
  export default {
    props: {
      modelValue: {
        type: String,
        default: '',
      },
      modelModifiers: {
        default: () => ({})
      }
    },
    setup(props, context) {
      const { modelModifiers } = toRefs(props)
      const handleEmit = e => {
        let value = e.target.value
        // 父组件使用修饰符toUpperCase，在这里自定义操作
        if (modelModifiers.value.toUpperCase) {
          value = value.toUpperCase()
        }
        context.emit('update:modelValue', value)
      }
      return { handleEmit }
    },
  }
</script>

<!-- 父组件 -->
<template>
  <div>
    <my-input v-model.toUpperCase="value"></my-input>
  </div>
</template>
<script>
import MyInput from '@/components/my-input'
import { ref } from 'vue'
export default {
  components: {
    MyInput
  },
  setup() {
    const value = ref('vue3.0 v-model的使用')
    return {
      value,
    }
  },
}
</script>

对于带参数的 v-model 绑定，生成的 prop 名称将为arg + "Modifiers"。注意 v-model 先参数，再修饰符。如例子：v-model:title.toUpperCase

<!-- 子组件 my-input.vue -->
<template>
  <div>
    <div>输入框：<input type="text" :value="title" @input="handleEmit"></div>
  </div>
</template>
<script>
  import { toRefs } from 'vue'
  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      titleModifiers: {
        default: () => ({})
      }
    },
    setup(props, context) {
      const { titleModifiers } = toRefs(props)
      const handleEmit = e => {
        let value = e.target.value
        if (titleModifiers.value.toUpperCase) {
          value = value.toUpperCase()
        }
        context.emit('update:title', value)
      }
      return { handleEmit }
    },
  }
</script>

父组件

<!-- 父组件 -->
<template>
  <div>
    <my-input v-model:title.toUpperCase="value"></my-input>
  </div>
</template>
<script>
import MyInput from '@/components/my-input'
import { ref } from 'vue'
export default {
  components: {
    MyInput
  },
  setup() {
    const value = ref('vue3.0 v-model的使用')
    return {
      value,
    }
  },
}
</script>