Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

enriqg9's avatar
Level 13

Call great grand children component method

I got a set of nested components as follows in Vue 2.2.1:

    <Root>
      <VForm>
        <Accordion>
          <Panel>
          <Panel>
          <Panel>
            <Stripe ref="stripe">

And I need to call a method getToken on the Stripe component when the form is submitted. On my <VForm> component I have the following template.

    <template>
      <form :method="method" :action="action" :class="classes" :autocomplete="autocomplete" @submit.prevent="submit">
        <slot></slot>
      </form>
    </template>
    
    <script>
    
      export default {
    
        props: {
          method: {
            type: String,
            default: 'POST'
          },
          action: {
            required: true,
            type: String
          },
          classes: {
            type: String
          },
          autocomplete: {
            type: String,
            default: 'on'
          }
        },
    
        methods: {
          submit(){
            this.$children[0].$children[2].$children[0].getToken()
          }
        }
      }
    
    </script>

Accessing the children one by one until you get to the Stripe component works but looks "dirty" to me. Is there another more elegant way to achieve this?

0 likes
0 replies

Please or to participate in this conversation.