关于聚合物，我如何获得一个网页组件'说'到另一个web组件

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

//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>