javascript - Polymer 2 - 单击另一个元素时显示一个元素

Question

我已经使用 Polymer 2 创建了两个自定义元素:

• 一个按钮
• 叠加元素

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

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

这有可能吗？我可以在元素之间共享数据绑定(bind)吗？

Answer 1

使用格言“事件在上， Prop 在下”，兄弟元素通过其父元素共享数据。对此有多种解决方案。我正在使用 Redux跨多个元素共享数据，但简单的父对n子方法有效:

在 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 .