在组件外调用组件函数答案

【问题标题】：Calling a component function outside of the component在组件外调用组件函数
【发布时间】：2016-01-28 12:58:37
【问题描述】：

在 Aurelia 中，假设我有一个名为 popup 的自定义组件，上面有一个 open 和 close 方法。我可以在组件中调用这些方法，但是如何从组件外部调用它们呢？

app.html:

<template>
  <require from="popup"></require>

  Pop-up test
  <popup>
    <popup-body>
      <button click.trigger="close()">Close</button>
    </popup-body>
  </popup>
</template>

popup.html:

<template>
  <button click.trigger="open()">Open</button>
  <button click.trigger="close()">Close</button>

  <div class="popup" show.bind="visible">
    Pop-up!
    <content select="popup-body"></content>
  </div>
</template>

popup.js

export class Popup {
  constructor() {
    this.visible = false;
  }

  open() {
    this.visible = true;
  }

  close() {
    this.visible = false;
  }
}

在 app.html 中的通知我正在添加一个按钮来尝试关闭模式。显然close() 不起作用，因为它正在 app.js 中寻找该方法。 popup.js中如何调用close方法？

这是上面的working Plunker example。

【问题讨论】：

标签： aurelia

【解决方案1】：

你可以通过view-model.ref获取组件的视图模型：

<popup view-model.ref="popup">

然后调用close：

export class App {
  close(){
    popup.close();
  }
}

here is the plunker

【讨论】：

【解决方案2】：

哦，我想我想通了 view-model.ref

<template>
  <require from="popup"></require>

  Pop-up test
  <popup view-model.ref="popup">
    <popup-body>
      <button click.trigger="popup.close()">Close</button>
    </popup-body>
  </popup>
</template>

【讨论】：