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

【问题标题】：Polymer 2 - display one element when click on anotherPolymer 2 - 单击另一个元素时显示一个元素
【发布时间】：2018-03-03 10:42:17
【问题描述】：

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

一个按钮
叠加元素

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

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

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

【问题讨论】：

标签： javascript html polymer polymer-2.x custom-element

【解决方案1】：

使用格言“事件向上，道具向下”，兄弟元素通过其父元素共享数据。对此有多种解决方案。我正在使用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。

【讨论】：