Search code examples
polymerpolymer-2.x

Any way to share data between Polymer components?


Currently I have two Polymer components that share a great amount of data. You can see here:

<polymer-component1
      series="{{series}}" 
      stackhelper={{stackhelper}} 
      stack={{stack}}
      controls={{controls}} 
      camera={{camera}} 
      threed={{threed}} 
      scene={{scene}} 
      renderer={{renderer}}>
</polymer-component1>
<polymer-component2 
      stackhelper=[[stackhelper]]
      stack={{stack}} 
      controls={{controls}} 
      camera={{camera}} 
      threed={{threed}} 
      scene={{scene}} 
      renderer={{renderer}}
      guiobjects={{guiobjects}}>
</polymer-component2>

This is working fine right now but whats the best practice about sharing data? Any way to share all the properties between two components?


Solution

  • It's recommended to share data through data binding, just as what you're doing. You can share any property, not just strings and numbers. e.g. assuming you have an object

    JS

    data = {
        series: "",
        stackhelper: "",
        stack: "",
        controls: "",
        camera: "",
        threed: "",
        scene: "",
        renderer: "",
    }
    

    Your code can be rewritten like this.

    HTML

    <polymer-component1 data="{{data}}"></polymer-component1>
    <polymer-component2 data="{{data}}"></polymer-component2>