Question

我想知道从父组件向子组件传递某些值并显示该值的最佳方法是什么，因为我试图通过属性和插槽传递值，并且两种方法都可行。属性：我有一个移动列表，并在父组件中使用了lit-html中的repeat（并使用方法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>
    `;
}

插槽：我有一个移动列表，并在父组件中使用lit-html中的repeat（并使用方法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

以下是使用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);

Answer 2

如果您要传递任何属性，值或类似属性，则必须使用Polymer属性（如果该方法是从父级到子级的（如果是从子级到父级的，则带有一个调度事件））。

在您创建了一个其他开发人员想要添加更多内容的空间时使用<slot>。聚合物指南说：

要允许孩子渲染，可以将元素添加到阴影树。可以将其视为显示子节点将在何处渲染的占位符。

因此，如果要将父级的值传递给子级，则可以使用属性。

Answer 3

您将数据作为属性而不是子元素本身进行传递。这些数据将是子元素需要完美呈现的内容。

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

当您不知道子元素的呈现方式时，可以使用slot。假设您正在创建其他开发人员将使用的元素，则无需知道其元素的结构或所需的数据。您要做的就是创建一个插槽作为占位符，以便任何开发人员都可以插入其模板。

//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>`

使用属性或插槽将数据传递给子元素

3 个答案: