What is the best way to communicate and pass data between child polymer elements?

Question

I have a parent polymer element baseline-policies-tab. This, on the UI, represents a tab on my website. In this tab, I have two polymer elements. One is baseline-policies-create which is a polymer element with a button. When this button is pressed, I want to send an event to another child polymer element that is contained within the tab, baseline-policy-ajax. This element will send an ajax request.

I've tried dispatchEvent by sending a CustomEvent but it didn't work for me (here is the question I posted regarding that: Why doesn't element catch event when using dispatchEvent from sibling polymer element?)

So is there another way to communicate between elements without using events?

Answer 1

There are mainly two ways of communications in polymer

1. Data binding

Polymer implements two-way data binding. this method is useful if you’re working inside a Polymer element and want to “link” elements together via public properties

<dom-module id="my-model">
  <script>
    class MyModel extends Polymer.Element {
      static get is() {
        return 'my-model';
      }

      static get properties() {
        return {
          items: {
            type: Array,
            value: ['item1', 'item2']
          }
        };
      }
    }

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

<dom-module id="my-app">
  <template>
    <my-model items="{{list}}"></my-model>
    <template is="dom-repeat" items="{{list}}">
        <div>{{item}}</div>
    </template>
  </template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() {
        return 'my-app';
      }

      static get properties() {
        return {
          list: {
            type: Array,
          }
        };
      }
    }
    window.customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>

2. Custom events

This method works with elements inside and outside a Polymer element. Other elements can listen for said events and respond accordingly.

<dom-module id="my-element">
  <script>
    class MyElement extends Polymer.Element {
      static get is() {
        return 'my-element';
      }

      sayHI() {

        let evt = new CustomEvent('my-element-say-hi', {
          detail: {
            message: 'hi'
          },
          bubbles: true,
          composed: true
        });
        window.dispatchEvent(evt);

        return 'Hi';

      }
    }

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

<dom-module id="my-app">
  <template>
    <my-element id="el"></my-element>
  </template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() {
        return 'my-app';
      }

      ready() {
        super.ready();
        Polymer.RenderStatus.afterNextRender(this, function() {
          window.addEventListener('my-element-say-hi', e => { /* do something */ });
        });

        this.$.el.sayHI();
      }
    }
    window.customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>