如何共享在聚合物的兩個元件之間的數據2.0

我有以下元件，其簡單地具有一個屬性，該元件本身設置：如何共享在聚合物的兩個元件之間的數據2.0

<link rel="import" href="../polymer/polymer-element.html"> 

<dom-module id="test-element-1"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <h2>Hello [[prop1]]!</h2> 
    </template> 

    <script> 
    /** 
    * `test-element-1` 
    * Test Element 1 
    * 
    * @customElement 
    * @polymer 
    * @demo demo/index.html 
    */ 
    class TestElement1 extends Polymer.Element { 
     static get is() { return 'test-element-1'; } 
     static get properties() { 
     return { 
      prop1: { 
      type: String, 
      value: 'test-element-1', 
      notify: true, 
      readOnly: true 
      } 
     }; 
     } 
    } 

    window.customElements.define(TestElement1.is, TestElement1); 
    </script> 
</dom-module>

和我想能夠第二元件使用相同的數據：

<link rel="import" href="../polymer/polymer-element.html"> 

<dom-module id="test-element-2"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <h2>Hello [[prop1]]!</h2> 
    </template> 

    <script> 
    /** 
    * `test-element-2` 
    * Test Element 2 
    * 
    * @customElement 
    * @polymer 
    * @demo demo/index.html 
    */ 
    class TestElement2 extends Polymer.Element { 
     static get is() { return 'test-element-2'; } 
     static get properties() { 
     return { 
      prop1: { 
      type: String, 
      notify: false, 
      readOnly: false 
      } 
     }; 
     } 
    } 

    window.customElements.define(TestElement2.is, TestElement2); 
    </script> 
</dom-module>

我想測試元件2能夠從測試元件1獲得PROP1的價值：

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> 

    <title>test-element-2 demo</title> 

    <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 

    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 
    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 
    <link rel="import" href="../test-element-2.html"> 
    <link rel="import" href="../../test-element-1/test-element-1.html"> 

    <custom-style> 
     <style is="custom-style" include="demo-pages-shared-styles"> 
     </style> 
    </custom-style> 
    </head> 
    <body> 
    <div class="vertical-section-container centered"> 
     <h3>Basic test-element-2 demo</h3> 
     <demo-snippet> 
     <template> 
      <test-element-1 prop1="{{prop1Value}}"></test-element-1> 
      <test-element-2 prop1="{{prop1Value}}"></test-element-2> 
     </template> 
     </demo-snippet> 
    </div> 
    </body> 
</html>

這裏是我的演示輸出雖然：

什麼是我做錯了？

來源

2017-09-14 Big Ali

你可以創建一個新組件，讓我們說測試元素包裝，包括他們兩個並保持同步的價值，並在你的網頁你會包括該包裝，而不是兩個單獨的元素 – mishu

由於您使用的是index.html或任何其他HTML頁面來顯示聚合物元素的值，因此它不能綁定prop1Value的值。

如果你使用polymer-element做同樣的事情，那麼它肯定會工作。

，如果你把它添加到數據綁定或其添加爲一個觀察者的依賴，計算性能，或計算結合的性質是隱式聲明。

聚合物自動爲這些隱含聲明的屬性創建setter。但是，隱式聲明的屬性不能由標記配置爲。

來源

2017-09-14 23:57:20 Ofisora

問題由@Osifara解釋，如果你想與孩子組件共享屬性，你需要做的頂級父WebComponent的，你需要做這樣的事情：

<body> 
    ......the other code 

    <dom-module id="my-index"> 
     <template> 
      <demo-snippet> 
       <template> 
        <test-element-1 prop1="{{propIndexTest}}"></test-element-1> 
        <test-element-2 prop1="{{propIndexTest}}"></test-element-2> 
       </template> 
      </demo-snippet> 
     </template> 
    </dom-module> 
    <my-index></my-index> 
    ......the other code 
</body> 
<script> 
    class MyIndex extends Polymer.Element { 
     static get is() { 
      return 'my-index'; 
     } 
     static get properties() { 
      return { 
       propIndexTest: { 
        type: String, 
        value: 'We are sharing the same value' 
        notify: false 
       } 
      }; 
     } 
    } 

    window.customElements.define(MyIndex.is, MyIndex); 
</script>

所以現在成爲您的頂級父容器，然後您可以使用聚合物來處理。

來源

2017-09-18 22:25:49

如何共享在聚合物的兩個元件之間的數據2.0

回答

相關問題