Polymer communication between elements

Question

I want to achieve communication between child parent with Polymer element.

Here my index.html

<proto-receiver data="message">
        <proto-element data="message"></proto-element>
</proto-receiver>

Both element have their respective "data" property

properties: {
   data: {
      value: 'my-data',
      notify: true,
   }
},

In proto-receiver, which is the parent I update "data" by handling simple click

<template>
    <span on-tap="onClick">proto receiver: {{data}}</span>
    <content></content>
</template> 


onClick: function () {
    this.data = 'new-message';
},

I want the change to be propagate to the child element as well, as it mentioned here.

I achieve this by passing a setter in my child element and called it like this. Which is, I guess, not the way it should be done.

 Polymer.Base.$$('body').querySelector('proto-element').setData(this.data);

What I'm doing wrong

Thanks

UPDATE:

For those coming here. The proper way of doing this is by using Events.

Polymer 1.x

this.fire('kick', {kicked: true});

Polymer 2.x (simple javascript)

this.dispatchEvent(new CustomEvent('kick', {detail: {kicked: true}}));

In both case the receiver should implement the regular addEventListener

document.querySelector('x-custom').addEventListener('kick', function (e) {
    console.log(e.detail.kicked); // true
})

Answer 1

To provide a concrete example to Scott Miles' comments, if you can wrap your parent and child elements in a Polymer template (such as dom-bind or as children to yet another Polymer element), then you can handle this declaratively. Check out the mediator pattern.

parent element:

<dom-module id="parent-el">
  <template>
    <button on-tap="onTap">set message from parent-el</button>
    <p>parent-el.message: {{message}}</p>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'parent-el',
      properties: {
        message: {
          type: String,
          notify: true
        }
      },
      onTap: function() {
        this.message = 'this was set from parent-el';
      }
    });
  </script>
</dom-module>

child element:

<dom-module id="child-el">
  <template>
    <p>child-el.message: {{message}}</p>
  </template>
  <script>
    Polymer({
      is: 'child-el',
      properties: {
        message: {
          type: String,
          notify: true
        }
      }
    });
  </script>
</dom-module>  

index.html:

<template is="dom-bind" id="app">
  <parent-el message="{{message}}">
    <child-el message="{{message}}"></child-el>
  </parent-el>
</template>
<script>
  (function(document) {
    var app = document.querySelector('#app');
    app.message = 'this was set from index.html script';
  }) (document);
</script>

JS Bin

Answer 2

I was facing same issue and got solution for it and fixed it as below

this.fire('iron-signal', {name: 'hello', data: null});

You can refer this iron-signals you will get the solution which you are looking for its basically event fire from any element to another

Hope this will help you Polymer iron signals