Question

一个人可以通过以下方式将属性传递给另一个 LitElement ：

myRender(myParameter) {
  return html`
    <my-element-one .propertyOne=${myParameter.somePropertyOne}></my-element-one>
  `;
}

我需要将数十个属性传递给多个元素。

myRenderOne(myParameter) {
  return html`
    <my-element-one 
      .propertyOne=${myParameter.somePropertyOne}>
      .propertyTwo=${myParameter.somePropertyTwo}>
      ...
      .propertyHundred=${myParameter.somePropertyHundred}>
    </my-element-one>
  `;
}

myRenderTwo(myParameter) {
  return html`
    <my-element-two 
      .propertyFive=${myParameter.somePropertyFive}>
      .propertySix=${myParameter.somePropertySix}>
      ...
      .propertyFifty=${myParameter.somePropertyFifty}>
    </my-element-two>
  `;
}

如何在不重复数十行代码的情况下传递通用属性？

Answer 1

通过Javascript传递它们。

设置自定义属性：

myElement.myProperty = myArrayOfProperties

调用自定义方法：

myElement.setProperties( myArrayOfProperties)

Answer 2

我将所有这些属性归为一个commonsProps对象：

const commonsProps = {
  propertyOne: somePropertyOne,
  propertyTwo: somePropertyTwo,

  [...]

  propertyOneHundred: somePropertyOneHundred,
}

并使用标准的LitElement数据绑定：

<my-element-one .commonsProps=${commonsProps}></my-element-one>
<my-element-two .commonsProps=${commonsProps}></my-element-two>

对您有用吗？

在多个LitElement中传递多个重复属性

2 个答案: