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

问题

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?

回答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>

回答2:

Communication in Polymer two is a bit tricky as Mr. Fakher already states you could use Databinding which will only work if your components are in a direct parent child relationship.

Also you could use Custom Events but then you have the problem that your communication will go only upwards the dom tree which probaply isn´t what you looking for.

What is tend to use in these situations, and yes this maybe sometimes is a overkill, is prims-event-bus.

来源：https://stackoverflow.com/questions/51559619/what-is-the-best-way-to-communicate-and-pass-data-between-child-polymer-elements