Question

我想从其父级调用子组件的函数。我有办法做到这一点，但我想知道我是否错过了更好的方法。

来自Ashley Grant的blog post关于从自定义属性访问自定义元素的viewModel，我看到Aurelia将au添加到元素中，您可以通过它访问viewModel。所以，如果我添加一个带有ref的嵌套组件，如下所示：

<template>
    <nested-element ref="childElement"></nested-element>
</template>

我可以像这样调用一个函数：

this.childElement.au.controller.viewModel.someFunction();

这感觉很迂回。我希望我能够通过参数访问嵌套元素的viewModel到父实现的钩子，例如created(owningView, myView)，但我找不到它的路径。

我错过了更好的方式吗？

编辑：我忘了添加我需要来自我正在调用的函数的返回值，因此最好能够访问viewmodel本身

Answer 1

ref为您提供元素。 view-model.ref为您提供元素的视图模型。

<template>
    <nested-element view-model.ref="childViewModel"></nested-element>
</template>

在父视图模型中调用它：

this.childViewModel.someFunction();

Answer 2

如果您只有一个嵌套元素的实例，或者不关心多个嵌套元素是否响应该事件。然后，您可以使用标准的Javascript事件功能：

一个bar.html

<template>
  <h1>${value}</h1>
    <input type="text" value.bind="value"></input>
    <foo>text</foo>
</template>

bar.ts

import {bindable} from 'aurelia-framework';
export class Bar {

  @bindable value;

  public valueChanged(newValue, oldValue) {
    var event = new CustomEvent("some-event-name", { "detail": { message: "Hello from Bar", oldValue, newValue } });
    document.dispatchEvent(event);
  }
}

foo.html

<template>
  <h1>${value}</h1>
</template>

foo.ts

import {bindable} from 'aurelia-framework';

export class Foo {
  constructor() {
    document.addEventListener("some-event-name", (e) => {
      console.log('hello here is Foo, recieved event from Bar : ', e);
    }, true);
  }
}

Aurelia - 嵌套组件的调用函数

2 个答案: