vue how to access v-model from child component

Question

my child component is like this

and then I access the component from inside like thi

Answer 1

To use v-model on custom components, the component needs to:

• have a prop (not a data property) named value:

  <template>
    <div>
      <input :value="value">
    </div>
  </template>
  
  <script>
  export default {
    props: ['value']
  }
  </script>
  

• and emit an input event with new values:

  <template>
    <div>
      <input @input="$emit('input', $event.target.value)">
    </div>
  </template>
  

demo