data-binding - 要素間のポリマー通信

Question

Polymer要素で子親間の通信を実現したい。

ここに私のindex.html

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

両方の要素にそれぞれの「データ」プロパティがあります

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

親であるプロトレシーバーでは、単純なクリックを処理して「データ」を更新します

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


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

ここで述べたように、変更を子要素にも反映させたいと思います。

これを実現するには、子要素にセッターを渡し、次のように呼び出します。これは、私が思うに、それが行われるべき方法ではありません。

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

私が間違っていること

ありがとう

アップデート：

ここに来る方へ。これを行う適切な方法は、イベントを使用することです。

ポリマー 1.x

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

Polymer 2.x (単純な JavaScript)

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

どちらの場合も、受信側は通常の addEventListener を実装する必要があります

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