Stenciljs中@Method装饰器无法使用，请求技术协助

我来帮你搞定这个报错！你碰到的Uncaught TypeError: myName.setName is not a function，核心原因是组件还没完成初始化就调用了暴露的方法。Stencil自定义元素的初始化是异步过程，直接在页面脚本里立即调用方法，此时组件的方法还没挂载到DOM元素上。

你的组件代码没问题 #

先确认一下：你用@Method装饰器暴露setName方法的写法完全正确，组件内部修改@Prop和@State的逻辑也没问题，这部分不用调整。

解决方案：等待组件初始化完成再调用方法 #

有两种简单的方式可以确保组件准备就绪：

方法1：使用customElements.whenDefined

这个API会等待指定的自定义元素完成定义，之后再执行方法调用：

<!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>
    // 等待my-name组件完成定义
    customElements.whenDefined('my-name').then(() => {
      const myName = document.querySelector('my-name');
      myName.setName('Bob', 'Smith');
    });
  </script>
</body>
</html>

方法2：监听componentReady事件

Stencil组件在初始化完成后会触发componentReady事件，我们可以监听这个事件来执行方法：

<!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>
    const myName = document.querySelector('my-name');
    // 监听组件就绪事件
    myName.addEventListener('componentReady', () => {
      myName.setName('Bob', 'Smith');
    });
  </script>
</body>
</html>

为什么原来的代码会报错？ #

当页面加载时，<my-name>标签虽然已经出现在DOM中，但Stencil还在后台完成组件的注册、实例化和方法挂载工作。此时直接调用myName.setName，DOM元素上还没有这个方法，自然会抛出类型错误。

内容的提问来源于stack exchange，提问作者Carl Rippon