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

Question

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

哪个是最好的方法？我什么时候必须使用其中之一？

Answer 1

object\'s properties这是一个使用 using传递的示例LitElement：

\n\n

演示版

\n\n

import { LitElement, html } from \'@polymer/lit-element\'; \n\nclass MyElement extends LitElement {\n\n  static get properties() { return { \n    movements: {\n        type:Object \n      }\n    }\n  }\n\n  constructor(){\n    super();\n    // Initialize property here.\n      this.movements = [{id:"123", amount:40000, description:"Bu yuzyilin en buyuk lideri Atat\xc3\xbcrk t\xc3\xbcr", balance:20000},{id:"123", amount:40000, description:"Tosun was here ! :) ", balance:20000},{id:"123", amount:40000, description:"Ne Mutlu Diyene, Buraarda \xc4\xb1rk\xc3\xa7\xc4\xb1 olmayahh :)) ", balance:20000}];\n  }\n\n //father component\nrender(){\n  return html`\n         ${this.movements.map(movement => html`<movement-list  .id=${movement.id} .description=${movement.description} .amount=${movement.amount} .balance=${movement.balance}></movement-list>`)}\n\n  `;\n}\n}\n\nclass MovementList extends LitElement {\n\n  static get properties() { return { \n    id: {type:String},\n    description: {type:String},\n    amount: {type:Number},\n    balance: {type:Number}\n    }\n  }\n  //child component\nrender(){\n    return html`\n        <dt>${this.id}</dt>\n        <dl>${this.description}</dl>\n        <dl>${this.amount}</dl>\n        <dl>${this.balance}</dl> \n\n    `;\n}\n\n}\ncustomElements.define(\'my-element\', MyElement);\ncustomElements.define(\'movement-list\', MovementList);\n

\n