关于 Polymer，如何让一个 Web 组件与另一个 Web 组件“对话”？答案

【问题标题】：With regards to Polymer, How do I get one web component to 'speak' to another web component?关于 Polymer，如何让一个 Web 组件与另一个 Web 组件“对话”？
【发布时间】：2016-12-04 14:48:20
【问题描述】：

我希望能够在 Web 组件 1 中填写表单，单击 Web 组件 1 中的提交按钮，然后将该数据发布到 Web 组件 2 中的网格中。Web 组件 1 与 Web 位于不同的 html 文件中组件 2。

//web component 1
<dom module id="foo-form">
<template>
  <paper-input id="myID" label="ID"value="{{myID}}"></paper-input>
  <paper-button id="submitForm" on-click="submitForm">Submit</paper-button>
</template>
 <script>
  (function() {
    "use strict";
  Polymer({
    is: 'foo-form',
     });
    })();
 </script>
</dom-module>


//Web component 2*
<dom-module id="my-grid">
  <template>
    <vaadin-grid selection-mode="single" id="fooBarGrid" >
      <table>
        <col name="vendorID" sortable="" />
        <thead>
          <tr>
            <th>ID</th>
         </tr>
        </thead>
      </table>
    </vaadin-grid>
  </template>
 <script>
   document.addEventListener("WebComponentsReady", function() {

      // Reference to the grid element.
      var grid = grid || document.querySelector("#fooBarGrid");

      // Reference to the template element
      var template = template || document.querySelector("template");

      // Add some example data as an array.
      var data = [
        { "myId": 0 } 
      ];
      grid.items = data;
 });

  </script>
 <script>
    (function() {
      'use strict';

      Polymer({
          is: 'my-grid',
        });
    })();
  </script>
</dom-module>

【问题讨论】：

标签： javascript html data-binding polymer web-component

【解决方案1】：

基本上有两种方法：

使用mediator pattern。如果您的父元素同时包含 my-grid 和 foo-form 元素，则此方法效果很好。可以找到解决方案here
如果您想在没有共同父级或不同 DOM 分支的元素之间进行通信，您可以使用iron-signals，它提供了基本的发布和订阅功能。

解决方案 1 是推荐的方法。

【讨论】：