当 Lit 中的任一组件发生变化时获取要更新的子/父属性

Question

只是尝试 Lit，但我似乎无法弄清楚如何传递引用或其他任何东西，以便当我的属性在父项或子项中发生变化时，它们都会发生变化。

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property() 
  name = 'Somebody';
  
  changeName() {
    this.name = "Changed From Parent";
  }

  render() {
    return html`
        <p>Hello, ${this.name}!</p>
        <button type="button" @click="${this.changeName}">change name from parent</button>
        
        <simple-child name="${this.name}"></simple-child>
    `;
  }
}

@customElement('simple-child')
export class SimpleChild extends LitElement {
  static styles = css`p { color: red }`;

  @property() 
  name = null;
  
  changeName() {
    this.name = "Changed From Child";
  }
  
  render() {
    return html`
        <p>Hello, ${this.name}!</p>
        <button type="button" @click="${this.changeName}">change name from child</button>
    `;
  }
}

Here it is in the Lit playground

我该如何正确执行此操作，以便在单击任一按钮时，父项和子项都正确更新？

Answer 1

与每个基于组件的框架一样，向上通信通过事件发生，向下通信通过属性发生。

<script type="module">
import {
  LitElement,
  html, css
} from "https://unpkg.com/lit-element/lit-element.js?module";

class SimpleGreeting extends LitElement {
  static get properties() {
    return {
      name: {type: String},
    };
  }
  
  static styles = css`p { color: blue }`;
 
  constructor() {
    super();
    this.name = 'Somebody';
  }
 
  render() {
    return html`<p>Hello, ${this.name}!</p>
        <button type="button" @click="${this.changeNameParent}">change name from parent</button>
        
        <simple-child name="${this.name}" @name-changed="${this.changeNameChild}"></simple-child>`;
  }
  
  changeNameParent() {
    this.name = "Changed From Parent";
  }
  
  changeNameChild(e) {
    this.name = e.detail.newname;
  }
}

class SimpleChild extends LitElement {
  
  static get properties() {
    return {
      name: {
        type: String,
      }      
    };
  }
  
  static styles = css`p { color: red }`;
 
  changeName() {
    const options = {
        detail: {newname: 'Changed From Child'},
        bubbles: true,
        composed: true
      };
    this.dispatchEvent(new CustomEvent('name-changed', options));
  }
 
  render() {
    return html`<p>Hello, ${this.name}!</p>
        <button type="button" @click="${this.changeName}">change name from child</button>`;
  }
}

customElements.define("simple-greeting", SimpleGreeting);
customElements.define("simple-child", SimpleChild);
</script>
<simple-greeting name="World"></simple-greeting>

当 Lit 中的任一组件发生变化时获取要更新的子/父属性

Get child / parent properties to update when they change from either component in Lit

javascript

lit