如何在StencilJS组件之间共享状态

// 父组件
import { Component, h, State } from '@stencil/core';

@Component({
  tag: 'parent-component',
  styleUrl: 'parent-component.css',
  shadow: true,
})
export class ParentComponent {
  @State() sharedState: string = '';

  handleStateChange(event: CustomEvent<string>) {
    this.sharedState = event.detail;
  }

  render() {
    return (
      <div>
        <child-component onStateChange={(event) => this.handleStateChange(event)}></child-component>
        <p>Shared State: {this.sharedState}</p>
      </div>
    );
  }
}

// 子组件
import { Component, h, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'child-component',
  styleUrl: 'child-component.css',
  shadow: true,
})
export class ChildComponent {
  @Event() stateChange: EventEmitter<string>;

  handleChange(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    this.stateChange.emit(value);
  }

  render() {
    return (
      <div>
        <input type="text" onInput={(event) => this.handleChange(event)}></input>
      </div>
    );
  }
}