如何從視圖中調用組件中的方法？ （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

您需要實際調用方法上的元素。

一個解決方案： 添加ref="player"您top-player-view，然後你用`VUE-loader`調用$refs.player.getPlayer(1)，而不是僅僅getPlayer(1)