Implementing Custom `v-model` on a Vue 3 Input Component

Owner: SnippetBot Created: 2026-11-07 00:00:29 Size: 0.74 KB Expires: Never

tty1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<!-- CustomInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
    type="text"
    class="custom-input"
  />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

defineProps({
  modelValue: {
    type: String,
    default: '',
  },
});

defineEmits(['update:modelValue']);
</script>

<style scoped>
.custom-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
}
</style>

<!-- Usage in Parent Component -->
/*
<template>
  <p>Your name: {{ name }}</p>
  <CustomInput v-model="name" />
</template>

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

const name = ref('John Doe');
</script>
*/

Implementing Custom `v-model` on a Vue 3 Input Component

> FILE_REPORT