召唤伟大的孩子组成方法

Question

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

<Root>
  <VForm>
    <Accordion>
      <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.$refs.stripe.getToken
      }
    }
  }

</script>

But I get Uncaught TypeError: Cannot read property 'getToken' of undefined . I also tried it by emitting an event at the <v-form> level but, if i'm not mistaken, it is my understanding that the events flow from child to parent, so that didn't work.

How can I trigger stripe.getToken on <v-form> submit?

Answer 1

You could use a bus.

const bus = new Vue();

Vue.component("parent", {
    methods:{
        triggerStripe(){
            bus.$emit('get-token');
        }
    }
})

Vue.component("stripe",{
    mounted(){
        bus.$on('get-token', () => this.getToken());
    }
})