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>级别发出一个事件来尝试它，但是，如果我没有弄错的话，我的理解是事件从子节点流向父节点，因此无效。

如何在stripe.getToken提交时触发<v-form>？

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

召唤伟大的孩子组成方法

1 个答案: