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

Posted 2021-04-12

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

• 一个按钮
• 覆盖元素

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

我想做的是通过每次“按钮”点击切换“覆盖元素”上的类。

是否有可能做到这一点？我可以在元素之间共享数据绑定吗？

答案

使用格言“事件向上，支持向下”，兄弟元素通过父母共享数据。对此有各种解决方案。我正在使用Redux来跨多个元素共享数据，但简单的父对子方法可行：

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