Question

有人可以向我展示一些有关将道具从父母班级发送给孩子的简单示例吗？有什么问题：

父组件：

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

和子组件：

    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类中定义属性，则必须添加点。

参考：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从父母向孩子发送道具

2 个答案: