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

问题描述 投票:1回答:1

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

  • 一个按钮
  • 覆盖元素

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

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

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

javascript html polymer polymer-2.x custom-element
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.