如何从视图中调用组件中的方法？ (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，然后调用 $refs.player.getPlayer(1) 而不仅仅是 getPlayer(1)

如何从视图中调用组件中的方法？ (vue.js 2)

How can I call method in the component from view? (vue.js 2)

javascript

vue.js

vue-component

vuejs2