是否可以将输入函数传递给Polymer中的另一个组件

Posted 2021-05-05

我想在智能和愚蠢的组件（逻辑和表示组件）上重构我的代码，我想知道是否可以在输入中传递函数并从主机组件触发它（例如在Angular中）。

答案

有可能的。我采用这种方法来获得模型数据的组件和带有切换的单独过滤组件，这些组件可以通过类似的方式将函数传递给模型组件：

<my-model id="modelData" items="{{items}}" filters="{{filters}}"></my-model>

<my-filter id="listFilter" active-filter="{{filters}}"></my-filter>

在<my-filter>内：

static get properties() {
  return {
    activeFilter: {
        type: Object,
        notify: true
    }
  }
}

apply() {
  this.activeFilter = this._compute(this.$.myToggle.value)
}

_compute(toggle) {
  return function(item) {
    return item.condition == toggle
  }
}

在<my-model>内：

_filterModel(model, filters) {
  for (let item of model) {
    if (filters(item)) {
      this.push('filteredList', item)
    }
  }
}

虽然我这样做只是作为一个概念证明，但通常我会绕过要修改的对象。