コール偉大な孫コンポーネントメソッド

Question

は、私は、ネストされたコンポーネントのセットを得た：

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

を私はフォームが送信されたときにストライプコンポーネント上でメソッドgetTokenを呼び出す必要があります。私の<VForm>コンポーネントには、次のテンプレートがあります。

<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> 

しかし、私はUncaught TypeError: Cannot read property 'getToken' of undefinedを得る。私も<v-form>レベルでイベントを出すことで試してみましたが、間違いがなければ、イベントが子から親に流れるので、うまくいきませんでした。

<v-form>でどうすればstripe.getTokenをトリガーできますか？

Answer 1

バスを使用できます。

const bus = new Vue(); 

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

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