Custom v-model on components in Vue - Mini Project: Build & Apply

Custom v-model on components

📖 Scenario: You are building a simple Vue app where a parent component uses a child component to edit a user's name. You want to connect the child's input with the parent's data using a custom v-model.

🎯 Goal: Create a child component with a custom v-model binding that updates the parent's userName data reactively.

📋 What You'll Learn

Create a child component named NameInput with a prop named modelValue

Emit an update:modelValue event when the input changes

In the parent component, define a reactive userName variable initialized to 'Alice'

Use the custom v-model syntax to bind userName to the NameInput component

💡 Why This Matters

🌍 Real World

Custom v-model bindings are useful when building reusable form components that need to sync data with their parents in Vue apps.

💼 Career

Understanding custom v-models is important for frontend developers working with Vue to create clean, maintainable, and reactive UI components.

1

Setup parent data

In the parent component's <script setup>, create a reactive variable called userName and set it to the string 'Alice'.

Vue

// Create a reactive variable userName with value 'Alice'
// Your code here

Need a hint?

Use ref from Vue to create a reactive variable.

2

Create child component with modelValue prop

Create a child component named NameInput with a props option that declares a modelValue prop of type String. The component should render an <input> element with its value bound to modelValue.

Vue

import { ref } from 'vue'
const userName = ref('Alice')

// Define NameInput component with modelValue prop
// Your code here

Need a hint?

Use defineComponent and declare props and emits. Bind value and listen for input event.

3

Use custom v-model in parent template

In the parent component's template, use the NameInput component and bind userName to it using the custom v-model syntax: <NameInput v-model:modelValue="userName" />.

Vue

import { ref, defineComponent } from 'vue'
const userName = ref('Alice')

const NameInput = defineComponent({
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const updateValue = event => {
      emit('update:modelValue', event.target.value)
    }
    return () => (
      
    )
  }
})



  
  

Need a hint?

Use the v-model:modelValue directive to bind userName to NameInput.

4

Display updated userName

Below the NameInput component in the template, add a <p> element that displays the text User name is: followed by the reactive userName value using interpolation.

Vue

import { ref, defineComponent } from 'vue'
const userName = ref('Alice')

const NameInput = defineComponent({
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const updateValue = event => {
      emit('update:modelValue', event.target.value)
    }
    return () => (
      
    )
  }
})



  
  User name is: {{ userName }}
  

Need a hint?

Use mustache syntax {{ userName }} inside a paragraph tag.