Is there a better way to access nested children using ref in Vue? (Grandfather - Father - Son)

Question

For how it is structured the project, and I cannot change, I need to get a value from a Father all the way down to the Son's son (Grandfather to Son relationship). This is a code example of what I am saying.

ComponentGrandfather.vue

<component-father
  ref="refGF"
  (...)
  ><component-father>

ComponentFather.vue

<component-son
  ref="refF"
  (...)
  ><component-son>

ComponentSon.vue

<input type=text ref="valueSon"></input>

I know that you can access to the Son using this.$ref.refGF.$ref.refF.$ref.valueSon.value, but I want to know if there is a less verbose way to this, or if this is the only way to do it.

Answer 1

You have props for that. You can drill the prop from the GF to the Father and then to the Son.