如何从视图中调用组件中的方法？ （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)