调用曾孙组件方法

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());
    }
})