如何使用 LitElement 将道具从父母发送给孩子

Question

Can someone show me some simple example about sending props from parent class to child? What is the problem:

parent 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>` //how to get this props in child component? } } customElements.define('parent-component', Parent);

and child component:

 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

ok, I found solution. If I want to define properties in Parent class I have to add dot.

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

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

So now everything is working.

And full example:

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

child component:

 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

Make it much standard.

In your child component., set properties to listen to message.

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

Answer 3

In children to load property from parent component:

 @property({type: Number}) propertyChild: number; constructor() { super(); this.propertyChild = (this.parentElement as TypeParent).propertyParent; }

In parent to update properties on children:

 override updated(): void { this.childNodes.forEach(node=>{ const nodeType = node as TypeChildren; if(nodeType.property) { nodeType.propertyChild = this.propertyParent; } }) }