v-model的使用 - 技术栈

底层原理

value 属性 + input 事件（Vue 2）

modelValue 属性 + update:modelValue 事件（Vue 3）

vue2

基础用法

javascript 复制代码

<template>
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
  />
</template>

<script>
export default {
  props: {
    value: { // 接收父组件 v-model 传递的值
      type: String,
      default: ''
    }
  },
  emits: ['input'] // Vue 2.3+ 推荐声明事件
}
</script>

javascript 复制代码

//父组件调用
<template>
  <CustomInput v-model="username" />
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput },
  data() {
    return {
      username: ''
    }
  }
}
</script>

自定义v-model名称

javascript 复制代码

<template>
  <input
    :value="username"
    @input="$emit('changeName', $event.target.value)"
  />
</template>

<script>
export default {
  props: {
    username: { // 自定义 props 名称
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'username', // 绑定的 props 名称
    event: 'changeName' // 触发的事件名称
  },
  emits: ['changeName']
}
</script>

javascript 复制代码

//父组件
<template>
  <CustomInput v-model="username" />
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput },
  data() {
    return {
      username: ''
    }
  }
}
</script>

vue3

基础用法

javascript 复制代码

<template>
  <!-- 1. 绑定内部输入框的值到 props.modelValue -->
  <!-- 2. 输入时触发 update:modelValue 事件，传递新值 -->
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
// 第一步：声明接收 modelValue 属性（v-model 绑定的值会传入这里）
defineProps(['modelValue'])

// 第二步：声明触发 update:modelValue 事件（告诉父组件更新值）
defineEmits(['update:modelValue'])
</script>

javascript 复制代码

//父组件
<template>
  <!-- 父组件通过 v-model 绑定数据 -->
  <CustomInput v-model="username" />
</template>

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'

const username = ref('')
</script>

自定义v-model名称

javascript 复制代码

<template>
  <div>
    <input
      :value="username"
      @input="$emit('update:username', $event.target.value)"
      placeholder="用户名"
    />
    <input
      :value="email"
      @input="$emit('update:email', $event.target.value)"
      placeholder="邮箱"
      type="email"
    />
  </div>
</template>

<script setup>
// 接收自定义名称的 props
defineProps(['username', 'email'])
// 声明自定义名称的事件
defineEmits(['update:username', 'update:email'])
</script>

javascript 复制代码

//父组件
<template>
  <CustomForm
    v-model:username="username"
    v-model:email="email"
  />
</template>

<script setup>
import { ref } from 'vue'
import CustomForm from './CustomForm.vue'

const username = ref('')
const email = ref('')
</script>

总结：

Vue 版本	绑定属性	触发事件	自定义方式
Vue 3	modelValue	update:modelValue	v-model: 自定义名称
Vue 2	value（默认）	input（默认）	model 选项配置 prop/event