How to pass v-model value to child's child component in Vue 3

Question

how can I pass the v-model value from parent component to child's child component?

Parent component

<ChildElement v-model="name" />

<script>
import { ref } from "vue";
export default {
  setup() {
    const name = ref('Nagisa')
  }
};
</script>

Child component

<AnotherChildComponent :value="value"/>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  emits: ['update:modelValue']
};
</script>

AnotherChild component

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

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ""
    }
  },
  emits: ['update:modelValue'],
  setup() {
  }
};
</script>

This works when I want to update parent component name value from AnotherChild component, however the default name value ('Nagisa') will not render in AnotherChild component just stays empty string in input.

Vuex is not option, I want to directly pass from parent component. Thank you for your help.

score 5 · Accepted Answer · answered Mar 28 '22 at 07:44

When you want to pass any component attributes, you need to usethe exact name you entered in props object of child component. For example..

In AnotherChild component's setup, you have prop with name modelValue, with default value of empty string.

props: {
    modelValue: {
      type: String,
      default: ""
    }
},

But, in its parent element, ChildComponent, you pass the value with name value,

<AnotherChildComponent :value="value"/>

which will not work, because you do not have any prop named value in AnotherChild Component, and so modelValue uses its default value of empty string. You need to pass the value as attribute with the prop name, like this:

<AnotherChildComponent :model-value="value"/>

This applies also to Child Component's parent and so on...

Yes, you are right. I was passing because vue 2 worked this way but I needed to change to model-value as well. Thank you so much! — Nagisa Ando, Mar 28 '22 at 14:24

How to pass v-model value to child's child component in Vue 3

1 Answers1