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

У меня вопрос о том, как лучше всего передать какое-либо значение от родительского компонента дочернему компоненту и показать значение, потому что я пытался передать значение со свойствами и слотом, и оба способа работают. Свойства: у меня есть список перемещений и я использую 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>
        `)}
    `;
}

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


javascript web-component polymer lit-element lit-html
person Ismael Rodriguez    schedule 15.11.2018    source источник
comment
Зачем вообще использовать lit-html? React легко поддерживает шаблоны и повторение. Итак, ответ: ни то, ни другое, что также избавит от этого, извините, действительно уродливого синтаксиса.   -  person Chris G    schedule 15.11.2018
comment
Кроме того, я думаю, что вы неправильно используете эти теги; dl - самый внешний, содержащий список пар _2 _, _ 3_: developer.mozilla.org/en-US/docs/Web/HTML/Element/dl   -  person Chris G    schedule 15.11.2018
comment
Да, внутренний тег неправильный, но для примера это не важно. Я не использую React, я использую Lit-Element   -  person Ismael Rodriguez    schedule 15.11.2018
comment
Ой, извините, пожалуйста, не обращайте на меня внимания :) Я увидел render() и компонент, и мой автоматически перешел в React :)   -  person Chris G    schedule 15.11.2018

Ответы (3)


arrow_upward
3
arrow_downward

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

ДЕМО

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);
person HakanC    schedule 15.11.2018

arrow_upward
1
arrow_downward

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

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

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

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

person AlvaroGlez    schedule 11.12.2018

arrow_upward
0
arrow_downward

Вы передаете данные как свойство, а не как дочерний элемент. Эти данные будут чем-то, что дочерний элемент должен правильно отображать.

// Parent
 render(){
   return html`${this.list.map(data => html`<child-element .data${data}></child-element>`)}`
}

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

//custom-element
render(){
   return html`<div> <slot></slot></div>`
}

// user 
render(){
return html`<custom-element>
          <my-element></my-element>
          <p>I am a paragraph in a slot</p>
          <div>You can see me too</div>
     </custom-element>`
person Charles Chiakwa    schedule 02.05.2020