Question

我的情况：我有一个使用LitElement创建的Web组件，该组件具有对象属性。为了初始化它，我正在等待创建元素：

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const instance = document.querySelector("#myInstance");
        instance.config = {
          data: [
            { firstName: "John", lastName: "Doe", age: 32 },
            { firstName: "Jane", lastName: "Boe", age: 30 },
          ]
        };
      });
    </script>
    <my-component id="myInstance"></my-component>

让我们说我将不时更改此data道具。一旦更改data的值，我想检查一下它的值，然后决定下一步该做什么。为此，这是我的Web组件的代码：

@customElement("my-component")
export class MyComponent extends LitElement {
  @property({ type: Object }) data: Object;

  protected updated(_changedProperties: Map<PropertyKey, unknown>): void {
    console.log(_changedProperties);
  }

  render() {
      return html`
        <div>blabla</div>
      `;
  }
}

问题是_changedProperties映射具有data，但仍未定义。我在这里想念什么？

Answer 1

changedProperties是所有已更改的属性名称的映射...例如您可以使用它来检查更改内容-如果要访问实际值，可以直接使用该属性。

看起来像这样

if (_changedProperties.has('myProperty')) {
  // react to a myProperty change
  console.log('The new value of myProperty is', this.myProperty);
}

如何使用LitElement组件正确处理道具更改？

1 个答案: