Используйте свойства или слот для передачи данных в дочерний элемент

Question

У меня вопрос о том, как лучше всего передать какое-то значение из родительского компонента в дочерний компонент и показать его, потому что я пытался передать значение с помощью свойств и слота, и оба способа работают. Свойства: у меня есть список движений, и я использую repeat из lit-html (и метод html для рендеринга) в родительском компоненте, чтобы создать n дочерний компонент, дающий значения в их свойствах.

//father component
render(){
    return html`
        ${repeat(movements, movement => movement.id, (movement, index)=> html`
            <movement
            .id=${movement.id} .description=${movement.description} .amount=${movement.amount} .balance=${movement.balance}>
            </movement>
            <hr>
        `)}
    `    
}

//child component
render(){
    return html`
        <dt>${this.id}</dt>
        <dl>${this.description}</dl>
        <dl>${this.amount}</dl>
        <dl>${this.balance}</dl>
    `;
}

Слот: у меня есть список движения, и я использую repeat из lit-html (и метод html для рендеринга) в родительском компоненте, чтобы создать n дочерний компонент, дающий значения в слоте, которые были объявлены в дочерний компонент

//child component
render(){
    return html`
    <dd>
        <slot name="id"></slot>
        <slot name="description"></slot>
        <slot name="amount"></slot>
        <slot name="balance"></slot>
    </dd>
    `;
}

//father component
render(){
    return html`
        ${repeat(movements, movement=>movement.id, (movement, index)=>html`
            <movement>
                <dt slot="id"> ${movement.id} </dt>
                <dl slot="description"> ${movement.description} </dl>
                <dl slot="amount"> ${movement.amount} </dl>
                <dl slot="balance"> ${movement.balance} </dl>
            </movement>
        `)}
    `;
}

Какой это лучший способ? Когда мне нужно использовать одно и другое?

Answer 1

Если вы хотите передать какое-либо свойство, значение или подобное, вы должны использовать свойство Polymer, если путь от родителя к потомку (с событием отправки, если оно от потомка к родителю).

Использование <slot> - это когда вы создали пространство, в которое другие разработчики хотят добавить больше контента. Руководство Полимера гласит:

Чтобы дети могли рендериться, вы можете добавить элемент в ваше теневое дерево. Думайте о <slot> как о заполнителе, показывающем, где будут отображаться дочерние узлы.

Итак, если вы хотите передать значение от родителя к потомку, я бы использовал свойство.

Answer 2

Вот пример передачи object's properties с использованием LitElement:

DEMO

import { LitElement, html } from '@polymer/lit-element'; 

class MyElement extends LitElement {

  static get properties() { return { 
    movements: {
        type:Object 
      }
    }
  }

  constructor(){
    super();
    // Initialize property here.
      this.movements = [{id:"123", amount:40000, description:"Bu yuzyilin en buyuk lideri Atatürk tür", balance:20000},{id:"123", amount:40000, description:"Tosun was here ! :) ", balance:20000},{id:"123", amount:40000, description:"Ne Mutlu Diyene, Buraarda ırkçı olmayahh :)) ", balance:20000}];
  }

 //father component
render(){
  return html`
         ${this.movements.map(movement => html`<movement-list  .id=${movement.id} .description=${movement.description} .amount=${movement.amount} .balance=${movement.balance}></movement-list>`)}

  `;
}
}

class MovementList extends LitElement {

  static get properties() { return { 
    id: {type:String},
    description: {type:String},
    amount: {type:Number},
    balance: {type:Number}
    }
  }
  //child component
render(){
    return html`
        <dt>${this.id}</dt>
        <dl>${this.description}</dl>
        <dl>${this.amount}</dl>
        <dl>${this.balance}</dl> 

    `;
}

}
customElements.define('my-element', MyElement);
customElements.define('movement-list', MovementList);