Vue child components quickly change the prop of the parent component update: modelValue

v-model parameter

By default, the v-model use on the component is  used  modelValue as a prop and  update:modelValue as an event. We can v-model modify these names by  passing parameters to:

<my-component v-model:foo="bar"></my-component>

In this example, the child component will need a  foo prop and emit  update:foo the event to be synchronized:

const app = Vue.createApp({})

app.component('my-component', {
  props: {
    foo: String
  },
  template: `
    <input 
      type="text"
      :value="foo"
      @input="$emit('update:foo', $event.target.value)">
  `
})

 

<my-component v-model:foo="bar"></my-component>