關於聚合物，我如何讓一個Web組件向另一個Web組件發言？

Question

我希望能夠在Web組件1中填寫表單，單擊Web組件1中的提交按鈕，然後將該數據發佈到Web組件2中的網格。Web組件1位於不同的HTML文件中，然後是Web組件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> 

Answer 1

基本上有兩種方法可以做到這一點：

1. 使用mediator pattern。如果您有一個包含my-grid和foo-form元素的父元素，則此方法效果良好。可以找到一個解決方案here
2. 如果要在不具有共同父代或不同DOM分支的元素之間進行通信，可以使用iron-signals，它提供了基本的發佈和訂閱功能。

解決方案1是推薦的方法。