Компонент не перерисовывается при вызове функции от дочернего элемента - PullRequest
Новая
       78

Компонент не перерисовывается при вызове функции от дочернего элемента

1 голос
/ 11 февраля 2020

Я пытаюсь изменить свойство, вызывая родительскую функцию из дочернего элемента. Вот ссылка на пример. Я предполагаю, что изменение свойства вызывает повторную визуализацию, когда функция вызывается из события, т.е. @click. Но возможно ли изменить свойство и вызвать повторную визуализацию, передав функцию и вызвав ее потом? 

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);

1 Ответ

2 голосов
/ 12 февраля 2020

При нажатии дочерней кнопки handleClick имеет this контекст ChildComponent. Если вы обновите шаблон ParentComponent с помощью функции =>, новое значение будет установлено в ParentComonent. 

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