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

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.

CodePudding user response：

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