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

Question

我的观点是这样的：

<nav class="navbar navbar-default navbar-fixed-top">
...
    <a *ngIf="!connectionState" [routerLink]="['/login']">Connect</a>
    <a *ngIf="connectionState" (click)="disconnect()">Disconnect</a>
...      
</nav>

我的组件顶级播放器视图是这样的：

this.subscription = authService.stateChange$.subscribe(
      value => {
        this.connectionState = value;
      })

我尝试在顶级播放器视图组件中调用getPlayer方法。我从视图中调用该方法。您可以在上面看到我的代码

当我单击选项卡时，我检查控制台是否存在错误：

  

[Vue警告]：未定义属性或方法“getPlayer”   实例，但在渲染期间引用。确保声明被动   数据选项中的数据属性。 （在根实例中找到）

     

未捕获的TypeError：getPlayer不是函数

我该如何解决？

Answer 1

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

一个解决方案： 将ref="player"添加到top-player-view，然后拨打$refs.player.getPlayer(1)而不是getPlayer(1)