증손자녀 컴포넌트 메서드 호출

증손자녀 컴포넌트 메서드 호출

Vue 2.2.1에서 다음과 같이 네스트된 컴포넌트 세트를 입수했습니다.

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

그리고 난 지금 응급처치를 불러야 해getTokenStripe 컴포넌트에서 폼을 전송합니다.내 위에<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>제출하시겠습니까?

버스가 필요할 수도 있어요.

const bus = new Vue();

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

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

언급URL : https://stackoverflow.com/questions/42883261/call-great-grand-children-component-method