뷰에서 구성 요소의 메서드를 호출하려면 어떻게해야합니까? (vue.js 2)

Question

내보기는 다음과 같이이다 :

<div class="row no-gutter"> 
    <div class="col-md-9 col-xs-12"> 
     <div class="wrap-tabs"> 
      <ul class="nav nav-tabs nav-cat"> 
       <li role="presentation" class="active"><a href="#" data-toggle="tab" @click="getPlayer(1)">England</a></li> 
       <li role="presentation"><a href="#" data-toggle="tab" @click="getPlayer(2)">Spain</a></li> 
       <li role="presentation"><a href="#" data-toggle="tab" @click="getPlayer(3)">Italy</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
<br> 
<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active"> 
     <top-player-view country_id="1"></top-player-view> 
    </div> 
</div> 

내 구성 요소 톱 플레이어 뷰는 다음과 같이이다 :

<template>  
    ... 
</template> 

<script> 
    export default{ 
     props:['country_id'], 
     created() { 
      this.$store.dispatch('getTopPlayers', this.country_id) 
     } 
     methods: { 
      getPlayer: function(country_id) { 
       this.$store.dispatch('getTopPlayers', country_id) 
      } 
     } 
    } 
</script> 

나는 최고 선수 뷰 구성 요소에서 getPlayer 메소드를 호출하려고합니다. 그 방법을보기에서 호출합니다.

[Vue warn]: Property or method "getPlayer" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

Uncaught TypeError: getPlayer is not a function

내가 그것을 어떻게 해결할 수 : 나는 탭을 클릭하면 당신은 내가 오류가 존재 콘솔에 확인

위의 내 코드를 볼 수 있습니까?

Answer 1

실제로 요소 을에 호출해야합니다.

하나 개의 솔루션 : 당신의 top-player-view에 ref="player"를 추가 한 다음`VUE-loader`를 사용하고 대신 getPlayer(1)