Vue 3 自定义 v-model：深入理解与实战指南

引言

在 Vue 3 中，v-model 依旧是一个强大的数据绑定语法，它简化了组件间双向数据绑定的过程。在实际开发中，我们有时需要根据特定需求自定义 v-model 的行为。本文将深入探讨 Vue 3 中自定义 v-model 的原理，并提供实战指南，帮助开发者更好地利用这一特性。

v-model 的基本原理

在 Vue 3 中，v-model 通常用于实现表单输入控件与组件内部数据属性的绑定。它本质上是一个语法糖，将 value 属性和 input 事件绑定到组件上。

<template> <input :value="modelValue" @input="onInput"> </template> <script setup> import { defineProps, defineEmits } from 'vue'; const props = defineProps(['modelValue']); const emit = defineEmits(['update:modelValue']); const onInput = (event) => { emit('update:modelValue', event.target.value); }; </script>

在这个例子中，modelValue 是从父组件传递给子组件的 prop，update:modelValue 是父组件监听的事件。当用户在输入框中输入内容时，onInput 函数会被触发，从而更新 modelValue。

自定义 v-model 的步骤

1. 创建自定义组件

创建一个自定义组件，该组件将接收 modelValue 和 update:modelValue 作为 prop。

<!-- CustomInput.vue --> <template> <input :value="modelValue" @input="onInput"> </template> <script setup> import { defineProps, defineEmits } from 'vue'; const props = defineProps(['modelValue']); const emit = defineEmits(['update:modelValue']); const onInput = (event) => { emit('update:modelValue', event.target.value); }; </script>

2. 使用自定义 v-model

在父组件中，使用 v-model 指令绑定到自定义组件上。

<!-- ParentComponent.vue --> <template> <CustomInput v-model="inputValue" /> </template> <script setup> import { ref } from 'vue'; import CustomInput from './CustomInput.vue'; const inputValue = ref(''); </script>

3. 自定义 v-model 修饰符

如果需要，你可以自定义 v-model 的修饰符。这可以通过在组件内部使用 const emit = defineEmits(['update:modelValue', 'custom-event']) 来实现，并在需要时触发自定义事件。

<!-- CustomInput.vue --> <template> <input :value="modelValue" @input="onInput"> </template> <script setup> import { defineProps, defineEmits } from 'vue'; const props = defineProps(['modelValue']); const emit = defineEmits(['update:modelValue', 'custom-event']); const onInput = (event) => { emit('update:modelValue', event.target.value); emit('custom-event', event.target.value); }; </script>

在父组件中，你可以这样使用自定义修饰符：

<!-- ParentComponent.vue --> <template> <CustomInput v-model="inputValue" @custom-event="handleCustomEvent" /> </template> <script setup> import { ref } from 'vue'; import CustomInput from './CustomInput.vue'; const inputValue = ref(''); const handleCustomEvent = (value) => { console.log('Custom event triggered with value:', value); }; </script>