Stenciljs @方法无效
我正在努力让@Method在stenciljs中工作--如果能提供任何帮助，我们将不胜感激。
下面是我的组件代码，其中有一个名为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不是一个函数
回答 3
Stack Overflow用户
发布于 2018-05-10 18:51:33
方法在组件上不可立即使用；它们必须由模板加载/补水，才能使用它们。
组件具有一个componentOnReady函数，可在组件准备使用时解析该函数。所以，就像：
var myName = document.querySelector("my-name");
myName.componentOnReady().then(() => {
myName.setName('Bob', 'Smith');
});Stack Overflow用户
发布于 2019-11-14 16:39:51
只是张贴另一个答案，因为这已经改变了，与模板一。
所有@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>Stack Overflow用户
发布于 2019-08-25 04:36:28
在这里，您不应该使用@方法，这不是最佳实践。我们应该尽量减少@方法的使用。这有助于我们轻松地缩放应用程序。
相反，通过@Prop和@Watch传递数据。
好的，在您的例子中，请在方法名之前添加异步。
https://stackoverflow.com/questions/50272576
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号