Polymer: Transfer data between sibling pages(elements) - polymer

Question

I need help by transferring data between two sibling elements of the polymer app. I can't make one of them to be the parent so that I can use dispatchEvent for the transfer of these elements.
Is there any way to transfer data between two sibling elements in polymer?

Answer 1

Of course, for example you can use DataBinding:
<some-element param="{{value}}"></some-element>
<another-element param="{{value}}"></another-element>
In these elements you can change this "value" param and it will be changed in another one:
<script>
class ...
changeParam(){
this.param="newValue";
}
</script>
Another way is using events. But you don't need to dispatch it. For example:
class ....
static get properties(){
return {
prop:{
type: Object,
value: {},
notify: true // (*)
}
}
In line with * you can see notify property. It fires event "prop-changed" when, as you could figure out, prop changes. So you can addEventListener for this event.
Note: somePropertyWhichCanBeChanged changes to some-property-which-can-be-changed-changed event.

Answer 2

My code:
<my-view1 name="view1" param="{{value}}"></my-view1>
<my-view2 name="view2" param="{{value}}"></my-view2>
VIEW1:
static get properties(){
return {
eventValue: {
type: String,
value: "Mirza",
notify: true
}
}
}
changeParam(){
this.param = "Azrim";
this.eventValue = "Mirzoni";
console.log("Param in view1: " + this.param);
console.log("EventValue in view1: " + this.eventValue);
}
VIEW2:
static get is() { return 'my-view2'; }
seeParam(){
console.log("Param in view2: " + this.param);
this.addEventListener('event-value-changed', function(e){
console.log("Receiving value...");
});
}