javascriptpolymerpolymer-2.x

How to pass data from child custom element back to parent element from where it is called in Polymer 2


i have this custom element in polymer below

 <parent-element> 
     <child-element myData="{{data}}"> </child-element>   <!--modifies the data-->
     <!-- Want to pass updated data to child-element-2-->

     <child-element-2> </child-element-2> 
 </parent-element>

Let me know how to pass the updated data to 2nd child element


Solution

  • Data-binding is the way to go here.
    You should be using a dash on the attribute while in the properties a camelCase. You can read about this in the Polymer documentation Property name to attribute name mapping.

    <dom-module id="my-element">
      <template>
        <my-child-one data="{{data}}"></my-child-one>
        <my-child-two add-data="[[data]]"></my-child-two>
      </template>
      <script>
       Polymer({
         is: 'my-element',
    
           properties: {
    
             data: {
              type: String,
           },
       });
      </script>
    </dom-module>
    

    Also do not forget to set notify to true on the property inside the my-child-one Element.