如何使用 LitElement 将道具从 parent 发送到 child

Question

谁能告诉我一些关于将 props 从 parent class 发送到 child 的简单示例？问题是什么：

parent 分量：

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

import './child.js';

class Parent extends LitElement {
    constructor() {
        super()

        this.message = "hello world"
    }


    render() {
        return html `<child-component message=${this.message}></child-component>` //how to get this props in child component?
    }
}

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

和child分量：

    import { LitElement, html, css } from 'lit-element';
    class Child extends LitElement {
      ...

      render() {
        return html `<p>${message from parent, but how}</p>` //message props should go to constructor? to render method as argument? how?
      }
    }
}
customElements.define('child-component', Child);

Answer 1

好的，我找到了解决方案。如果我想在 Parent class 中定义属性，我必须添加点。

Reference: https://lit-element.polymer-project.org/guide/properties

render() {
    return html `<child-component .message=${this.message}></child-component>`
}

所以现在一切正常。

完整示例：

父组件：

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

import './child.js';

class Parent extends LitElement {
    constructor() {
        super()

        this.message = "hello world"
    }


    render() {
        return html `<child-component .message=${this.message}></child-component>`
    }
}

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

子组件：

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

class Child extends LitElement {
  ...

  render() {
    return html `<p>${this.message}</p>` //this.message have "hello world" value now
    }
}

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

Answer 2

让它更标准。

在您的子组件中，设置属性以收听消息。

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

class Child extends LitElement {
  static get properties(){
    return{
      message: {
        type: String,
      }
    }
  }
  constructor(){
    super();
    console.log(message);
  }

  render() {
    return html `<p>${this.message}</p>` //this.message have "hello world" value now
    }
}

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

如何使用 LitElement 将道具从 parent 发送到 child

How to send props from parent to child with LitElement

javascript

lit-element