8

我正在努力让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>

这是我遇到的错误的屏幕截图，它是Uncaught TypeError: myName.setName is not a function：

在此处输入图像描述

4

3 回答 3

13

方法在组件上不是立即可用的；在您使用它们之前，它们必须由 Stencil 加载/水合。

组件具有componentOnReady在组件准备好使用时解析的功能。所以像：

var myName = document.querySelector("my-name");
myName.componentOnReady().then(() => {
  myName.setName('Bob', 'Smith');
});
于 2018-05-10T18:51:33.150 回答
10

只是发布另一个答案，因为这已经改变了，使用 Stencil One。

现在所有@Method修饰的方法都可以立即在组件上使用，但它们必须是async，以便您可以立即调用它们（并且一旦组件准备好它们就会解析）。用于此的用途componentOnReady现在已过时。

但是，您应该使用自定义元素注册表的方法确保该组件已在自定义元素注册表whenDefined中定义。

<script>
(async () => {
  await customElements.whenDefined('my-name');

  // the component is registered now, so its methods are immediately available
  const myComp = document.querySelector('my-name');

  if (myComp) {
    await myComp.setName('Bob', 'Smith');
  }
})();
</script>
于 2019-11-14T16:39:51.490 回答
0

在这里您不应该使用 @Method ，这不是最佳实践。我们应该始终尽量减少@Method 的使用。这有助于我们轻松扩展应用程序。

而是通过 @Prop 和 @Watch 传递数据。

好的，在您的情况下，请在方法名称前添加 async

于 2019-08-25T04:36:28.267 回答