javascript - Stenciljs @Method不起作用

我正在努力让stenciljs中的 @Method 工作-任何帮助将不胜感激。

这是我的组件代码，带有要在组件上公开的名为 setName 的函数:

import { Component, Prop, Method, State } from "@stencil/core";

@Component({
  tag: "my-name",
  shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;
  @State() dummy: string;

  @Method() setName(first: string, last: string): void {
    this.first = first;
    this.last = last;
    this.dummy = first + last;
  }
  render(): JSX.Element {
    return (
      <div>
        Hello, World! I'm {this.first} {this.last}
      </div>
    );
  }
}

这是引用该组件的html和脚本:

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title>
  <script src="/build/mycomponent.js"></script>

</head>
<body>

  <my-name  />

  <script>
    var myName = document.querySelector("my-name");
    myName.setName('Bob', 'Smith');
  </script>
</body>
</html>

这是我遇到的错误的屏幕快照，它是未捕获的TypeError:myName.setName不是函数:

javascript - Stenciljs @Method不起作用-LMLPHP

最佳答案

方法不适用于组件。在使用它们之前，必须先通过Stencil将它们装载/水合。

组件具有componentOnReady函数，可以在准备使用组件时进行解析。所以像:

var myName = document.querySelector("my-name");
myName.componentOnReady().then(() => {
  myName.setName('Bob', 'Smith');
});