Question

我使用Polymer 2创建了两个自定义元素：

一个按钮
叠加元素

我正在导入并在另一个“主要元素”上使用它们。

我想要做的是在每个“按钮”点击的情况下在“覆盖元素”上切换一个类。

有可能这样做吗？我可以在元素之间共享数据绑定吗？

Answer 1

使用格言＆＃34;事件向上，支持，＆＃34;兄弟元素通过父母共享数据。对此有各种解决方案。我使用Redux在多个元素之间共享数据，但简单的父对象 n -children方法有效：

在main-element.html

中

<button-element id="button"></button-element>
<overlay-element id="overlay"></overlay-element>
...
ready() {
  super.ready();
  this.$.button.addEventListener('toggle', this._onUpdate);
}
_onUpdate(event) {
  this.$.overlay.toggle = !this.$.overlay.toggle;
}

在button-element.html

中

<button on-click="_doClick">Ok</button>
...
_doClick(event) {
  this.dispatchEvent(new CustomEvent('toggle'));
}

在overlay-element.html

中

<div>[[status]]</div>
...
static get properties() {
  return {
    toggle: {
      type: Boolean,
      observer: '_toggleChanged'
    },
    status: {
      type: String
    }
...
_toggleChanged(newValue, oldValue) {
  this.status = newValue ? 'I\'m hit.' : 'Missed me.';
}

请参阅this pen。

聚合物2 - 单击另一个时显示一个元素

1 个答案: