从 child 调用函数时组件不是 re-rendering

Question

我正在尝试通过从 child 调用 parent 函数来更改属性。下面是 link 的例子。我假设当函数从事件调用时属性更改触发 re-render，即 @click。但是是否可以通过将函数传递给 child 并调用它来更改属性并触发 re-render？

class ParentComponent extends LitElement {

      static get properties() {
        return {
          value: { type: String, reflect: true }
        }
      }

      constructor() {
        super();
        this.value = 'value';
      }

      handleClick(value) {
        this.value = value;
      }

      render() {
        return html `
          <div>
            <p>My Value: ${this.value}</p>

          <button @click="${() => this.handleClick('value from parent')}">Parent Button</button>
            <child-component
              .handleClick="${this.handleClick}"
            ></child-component>
          </div>
        `;
      }

    }

 customElements.define('parent-component', ParentComponent);

 class ChildComponent extends LitElement {

      static get properties() {
        return {
          handleClick: { type: Function }
        }
      }

      render() {
        return html `
          <button @click="${() => this.handleClick('value from child')}">Child Button</button>
        `;
      }

    }

customElements.define('child-component', ChildComponent);

Answer 1

单击子按钮时 handleClick 具有 ChildComponent 的 this 上下文。如果您使用 => 函数更新 ParentComponent 模板，则会在 ParentComonent 上设置新值。

<child-component
  .handleClick="${(value) => this.handleClick(value)}"
></child-component>

从 child 调用函数时组件不是 re-rendering

Component not re-rendering when calling function from child

javascript

web-component

lit-element

lit-html