Component v-model

Two-way Binding

v-model supports two-way binding.

<!-- Native Element -->
<input v-model="searchText" />

<!-- Custom Component -->
<CustomInput v-model="searchText" />

Example: CustomInput.vue

<template>

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

<script>

defineProps(['modelValue']);
defineEmits(['update:modelValue']);

For multiple bindings:

<UserName v-model:first-name="first" v-model:last-name="last" />

Example: UserName.vue

<template>

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

<script>

defineProps({ firstName: String, lastName: String });
defineEmits(['update:firstName', 'update:lastName']);

This provides a concise overview of component registration, props usage, and v-model implementation in Vue.js.