4

我有一个问题，将一些值从父组件传递给子组件并显示该值的最佳方式是什么，因为我尝试使用属性和插槽传递值，并且两种方式都有效。属性：我有一个移动列表，并使用父组件中的repeatlit-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>
    `;
}

插槽：我有一个移动列表，并使用父组件中的repeatlit-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>
        `)}
    `;
}

哪个是最好的方法？我什么时候必须使用一个和另一个？

4

3 回答 3

3

object's properties这是一个使用 using传递的示例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);
于 2018-11-15T17:42:11.893 回答
1

如果你想传递任何属性、值或类似的东西，如果方式是从父级到子级，则必须使用 Polymer 属性（如果是从子级到父级，则使用调度事件）。

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

要允许子级渲染，您可以向阴影树中添加一个元素。将<slot>视为显示子节点将呈现的位置的占位符。

因此，如果您想将值从父级传递给子级，我会使用属性。

于 2018-12-11T18:42:20.393 回答
0

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

// 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>`
于 2020-05-02T13:10:59.407 回答