在组件外部调用组件函数

Question

在 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。

Answer 1

哦，我想我用 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>

Answer 2

您可以使用 view-model.ref:

获取组件的视图模型

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

然后调用关闭：

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

here is the plunker

在组件外部调用组件函数

Calling a component function outside of the component

aurelia