Typescript 如何使用litElement在另一个组件中获取组件状态更改？

我开始了一个基于 有许多组件相互嵌套，假设我们有以下结构：

根组件是

my app

import { LitElement, html, customElement, query } from 'lit-element';
import './my-form';
import './my-view';
import { MyView } from './my-view';

@customElement('my-app')
export class MyApp extends LitElement {
  @query('my-view') private myView?: MyView;

  private handleCountChange(e: CustomEvent<{ count: number }>) {
    if (!this.myView) throw 'my-view not found!';
    this.myView.count = e.detail.count;
  }

  render() {
    return html`
      <my-form @countChanged=${this.handleCountChange}></my-form>
      <my-view></my-view>
    `;
  }
}

从'lit element'导入{LitElement，html，customElement，query}；
导入“/”我的表格“；
导入“/”我的视图“；
从“/my view”导入{MyView}；
@customElement（“我的应用程序”）
导出类MyApp扩展了LitElement{
@查询（'my-view'）私有myView？：myView；
私有handleCountChange（e:CustomEvent）{
如果（！this.myView）抛出“找不到我的视图！”；
this.myView.count=e.detail.count；
}
render（）{
返回html`
`;
}
}

如您所见，我们有两个组件：我的表单

import { LitElement, html, customElement, property } from 'lit-element';

@customElement('my-form')
export class MyForm extends LitElement {
  @property({ type: Number }) count: any = 0;

  private updateCount(e: KeyboardEvent) {
    this.count = (<HTMLInputElement>e.target).value;
    this.dispatchEvent(
      new CustomEvent('countChanged', {
        composed: true,
        bubbles: true,
        cancelable: true,
        detail: { count: this.count }
      })
    );
  }

  render() {
    return html`
      <input value=${this.count} @input=${this.updateCount} type="text" />
    `;
  }
}

从'lit element'导入{LitElement，html，customElement，property}；
@customElement（“我的表单”）
导出类MyForm扩展了LitElement{
@属性（{type:Number}）计数：any=0；
私有更新帐户（e:KeyboardEvent）{
this.count=（e.target）.value；
这就是dispatchEvent(
新建CustomEvent（'countChanged'{
是的，
泡泡：是的，
可取消：对，
详细信息：{count:this.count}
})
);
}
render（）{
返回html`
`;
}
}

我的看法是：

import { LitElement, html, customElement, property } from 'lit-element';

@customElement('my-view')
export class MyView extends LitElement {
  @property({ type: Number }) count: number = 0;

  render() {
    return html`
      <p>${this.count}</p>
    `;
  }
}

从'lit element'导入{LitElement，html，customElement，property}；
@customElement（“我的视图”）
导出类MyView扩展了LitElement{
@属性（{type:Number}）计数：Number=0；
render（）{
返回html`
${this.count}

`;
}
}

要获取属性

count

从

my form

更改为

my view

我调度了事件侦听器，然后在

my app

使用它，然后在

handleCountChange

我将

count

值指定给

MyView

，除了将其作为组件导入外，还将其作为类导入

目前，这是可行的，但我觉得这是一个漫长的道路，尤其是当我有更多的嵌套组件。我想知道是否有更好的方法来做这件事。 在

react.js

---

我曾考虑过使用

redux

，但有人不推荐使用litelement。

---

我的想法之一是将事件发送到

文档

，而不是当前组件，但这可能是一种糟糕的做法！您有什么建议，请告诉我？

您可能已经解决了这个问题，但我可以告诉您我将如何处理这个问题

您需要将您的状态提升到

my app

组件。此状态将是真实性的单一来源，并将

count

值传递给

my form

和

my view

子组件

在

myapp

组件中，您可以将

handleCountChange

更改为类似的内容（在这种情况下，如果您将

count

定义为属性，并让

myapp

接收属性的初始值）：

private handleCountChange（e:CustomEvent）{
this.setAttribute（'count'，count）；//如果将'count'设置为观察属性，则不需要调用'requestUpdate'方法
}

或者像这样，如果您将

count

定义为类属性

 private handleCountChange(e: CustomEvent<{ count: number }>) {
   this.count = count;
   this.requestUpdate(); // force to call render method which is necessary in this case
 }

private handleCountChange（e:CustomEvent）{
this.count=计数；
this.requestUpdate（）；//强制调用render方法，这在本例中是必需的
}

请注意，您还必须将

count

值发送到

my form

组件。如果没有它，它也会起作用，但如果你这样做，你将失去你状态的唯一真相来源，这可能导致潜在的意外行为

---

如果你需要发送一个例子，请让我知道

“有人不推荐Litelement”你应该使用对你有意义的工具。Redux似乎是一种合理的方法。使用LitElement构建，并使用Redux。