将数据传递给另一个 Polymer 组件答案

【问题标题】：Pass data to another Polymer component将数据传递给另一个 Polymer 组件
【发布时间】：2017-03-24 14:17:53
【问题描述】：

我正在开发仪表板，其中顶部有一个搜索面板（我们称之为组件 A），用户可以在其中输入查询。此输入的值将更改仪表板中的许多其他组件（不仅仅是作为其直接后代或兄弟姐妹的组件）。我想将搜索值从组件 A 发送到组件 B，然后它应该通过对输入值执行一些操作来响应。

我尝试了一些方法：

直接调用组件 B 中的函数。根本无法让它工作。
手动设置 B 的本地属性值并使用观察者触发函数调用。我经理设置值，但观察者没有触发。
使用全局变量，我可以轻松跨组件访问，但我仍然无法触发特定组件中的函数。

我怎样才能最好地做到这一点？我对 Polymer 比较陌生，所以如果我的想法没有完全“聚合”，请原谅我 :)

方法 1

<dom-module id="component-B">
  <template>
  </template>
  <script>
    Polymer({
      is: 'component-B',
      properties: {
        id: '',
        observer: '_idUpdate'
      },
      _idUpdate: function(){
        console.log("HELLO");
      }
    });
  </script>
</dom-module>

<dom-module id="component-A">
  <template>
  </template>
  <script>
    Polymer({
      is: 'component-A',
      idSearch: function() {
        var id = this.$.search.value;
        document.querySelector('component-B').properties.id = id;
      },
    });
  </script>
</dom-module>

【问题讨论】：

你能添加一些代码吗？特别是对于您的方法 1 和 2。这应该是有效的理论。你也可以看看data-binding。
@Maria 我添加了一个小的 sn-p。希望这已经足够了。我认为当前设置 id 属性值的方式是不可观察的。但我不知道如何使设置可观察，以便组件 B 中的观察者触发。

标签： polymer polymer-1.0 web-component

【解决方案1】：

当您想向多个元素（可能不是触发元素的兄弟）发送数据时，您可以使用这两种方法中的任何一种

使用iron-signal 触发信号，然后在您想要数据的所有元素中使用iron-signal 标签来监听信号
```
 <iron-signals on-iron-signal-<signal-name>="<function>"></iron-signals>
```
您还可以使用标准 HTML 方法 dispatchEvent 触发信号，然后在您需要数据的所有元素中添加 eventListeners。

【讨论】：