召喚偉大的孩子組成方法

Question

我在Vue 2.2.1中得到了一組嵌套組件：

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

我需要在提交表單時在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());
    }
})