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

Posted 2023-02-23

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

【英文标题】：How can I call method in the component from view? (vue.js 2)

【发布时间】：2017-07-08 19:27:23

【问题描述】：

我的看法是这样的：

<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 警告]：属性或方法“getPlayer”未在 实例，但在渲染期间引用。确保声明反应式 数据选项中的数据属性。 （在根实例中找到）

未捕获的类型错误：getPlayer 不是函数

我该如何解决？

【问题讨论】：

你在使用vue-loader吗？

如果我没记错的话 Vue2 created() 被替换为mounted()。

@Daniel T.，没有。好像我没用过

@peaceman，看来问题不存在

【参考方案1】：

您需要在元素上实际调用方法。

一种解决方案： 将ref="player" 添加到您的top-player-view，然后调用$refs.player.getPlayer(1) 而不仅仅是getPlayer(1)