Question

我想实现子父与Polymer元素之间的沟通。

这是我的index.html

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

两个元素都有各自的“数据”属性

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

在proto-receiver中，我是父母，我通过处理简单的点击来更新“数据”

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


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

我希望将更改传播到子元素，就像它提到here一样。

我通过在我的子元素中传递一个setter并像这样调用它来实现这一点。我猜，这不应该是它应该做的方式。

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

我做错了什么

由于

更新

对于那些来这里的人。这样做的正确方法是使用事件。

Polymer 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
})

Answer 1

要为Scott Miles'注释提供具体示例，如果您可以将您的父元素和子元素包装在Polymer模板中（例如dom-bind或将子元素包装到另一个Polymer元素中），那么您可以声明地处理这个问题。查看mediator pattern。

父元素：

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

子元素：

<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

我遇到了同样的问题并得到了解决方案，并修复如下 this.fire（'iron-signal'，{name：'hello'，data：null}）; 您可以参考这个铁信号，您将获得解决方案，您正在寻找从任何元素到另一个元素的基本事件希望对你有帮助聚合物铁信号

元素

2 个答案: