Stenciljs @Method不工作

Question

Stenciljs @Method不工作

Car*_*pon 5 javascript web-component stenciljs stencil-component

我正努力让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>
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

这是引用该组件的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>

Run Code Online (Sandbox Code Playgroud)

这是我得到的错误的屏幕截图,它是Uncaught TypeError:myName.setName不是函数:

Answer 1

mat*_*ele 11

方法不能立即在组件上获得; 在使用它们之前,它们必须由Stencil加载/补充.

组件具有componentOnReady在组件准备好使用时解决的功能.所以类似于:

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

Run Code Online (Sandbox Code Playgroud)

更正 - 更新到模板0.8.2后,这工作正常! (3认同)

Answer 2

Sim*_*sch 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，1 月前
查看次数：	1145 次
最近记录：	6 年，7 月前