javascript - ステンシルの親コンポーネントから子関数をトリガーする

Question

親コンポーネントから子コンポーネント関数をトリガーし、stenciljs でデータを送信する方法

から<parent-component>、関数 onClick を実行してから、 <child-component>@Listen デコレータを使用せずに関数でデータを送信してみます。

Answer 1

@Method()そのために、子でデコレータを使用できます。

@Component({ tag: 'child-component' })
export class Child {
  @Method()
  async foo() {
    return 'bar';
  }
}

@Component({ tag: 'parent-component' })
export class Parent {
  @State() childRef?: HTMLChildComponentElement;

  clickHandler = async () => {
    const foo = await this.childRef?.foo();
  }

  render() {
    return (
      <Host onClick={this.clickHandler}>
        <child-component ref={el => (this.childRef = el)} />
      </Host>
    );
  }
}

https://stenciljs.com/docs/methodsを参照してください。

また、参照は、子がレンダリングされるまで設定されないことに注意してください (つまり、 ではまだ使用できませんcomponentWillLoad)。

---

について言及したので@Listen、関数を props (コールバックのようなもの) として子に渡すことができると便利だと思うかもしれません。

@Component({ tag: 'child-component' })
export class Child {
  @Prop() clickHandler: (e: MouseEvent) => void;

  render() {
    return <Host onClick={this.clickHandler} />;
  }
}

@Component({ tag: 'parent-component' })
export class Parent {
  render() {
    return <child-component clickHandler={e => console.log(e.target.tagName)} />;
  }
}