vue组件实现vmodel

Vue 组件实现 v-model

在 Vue 中，v-model 是双向数据绑定的语法糖，默认用于表单元素。自定义组件也可以通过实现 v-model 来支持双向绑定。以下是实现方法：

默认实现方式（Vue 2 和 Vue 3 兼容）

Vue 的 v-model 默认会利用 value 属性和 input 事件实现双向绑定。

子组件代码：

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

<script>
export default {
  props: ['value']
}
</script>

父组件使用：

<custom-input v-model="message"></custom-input>

Vue 3 的 v-model 改进

Vue 3 中 v-model 默认使用 modelValue 属性和 update:modelValue 事件，支持多个 v-model 绑定。

子组件代码：

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

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

父组件使用：

<custom-input v-model="message"></custom-input>

自定义 v-model 参数

Vue 3 允许为 v-model 指定参数，实现多个双向绑定。

子组件代码：

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

<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>

父组件使用：

<custom-input v-model:title="pageTitle"></custom-input>

处理复杂数据类型的 v-model

对于复杂数据类型（如对象），可以直接传递并更新整个对象。

子组件代码：

<template>
  <input
    :value="modelValue.text"
    @input="$emit('update:modelValue', { ...modelValue, text: $event.target.value })"
  />
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

父组件使用：

<custom-input v-model="formData"></custom-input>

通过以上方法，可以灵活地在自定义组件中实现 v-model 功能，满足不同场景的需求。