javascript - 关于Polymer，我如何使一个Web组件与另一个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>

最佳答案

基本上有两种方法可以做到这一点：


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


建议使用解决方案1。

关于javascript - 关于Polymer，我如何使一个Web组件与另一个Web组件“对话”？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38666371/