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>
);
}
}
这是引用该组件的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不是函数:
mat*_*ele 11
方法不能立即在组件上获得; 在使用它们之前,它们必须由Stencil加载/补充.
组件具有componentOnReady在组件准备好使用时解决的功能.所以类似于:
var myName = document.querySelector("my-name");
myName.componentOnReady().then(() => {
myName.setName('Bob', 'Smith');
});
- 更正 - 更新到模板0.8.2后,这工作正常! (3认同)
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>
| 归档时间： |
|
| 查看次数： |
1145 次 |
| 最近记录： |