Javascript polymer 1.0中父页面和子页面之间的事件处理

我有一个称为父页面的父元素和一个称为子页面的子元素

父页面调用子页面并传递一个数组。例如，在父页面中：

<child-page items={{itemsArray}}></child-page>

父页面正在侦听此数组，并以预期值接收该数组。 现在，我想将这个新数组传递给子页面，这样子页面就会根据新数组呈现

如何实现

编辑：我的子页面如下所示

{{fooditem.quantity}
{{fooditem.name}
更改数组
聚合物({
是：'child-page'，
特性：{
itemArray:数组
},
changeArray:function（）{
此为.itemArray=
this.fire（'eventPerformed'，newArray）；
}
});

每当更新其

itemrarray

属性时，

子页面将自动重新呈现其
模板is=“dom repeat”items=“[[itemrarray]]”

只需将
notify:true
添加到
子页面
中的
itemrarray
属性，即可启用与
父页面
元素的双向绑定。然后，每当
子页面
的
项目数组
发生更改时，也会通知
父页面
（请参阅）

下面是一个完整的小示例：

<dom-module id="child-page">
  <template>
    <template is="dom-repeat" items="[[itemArray]]">
      <div>[[item]]</div>
    </template>
    <div on-click="_changeArray">Change</div>
  </template>
  <script>
    Polymer({
      is: 'child-page',
      properties: {
        itemArray: {type: Array, notify: true}
      },
      _changeArray: function() {
        this.itemArray = [4,5,6,7,8,9];
      }
    })
  </script>
</dom-module>

<dom-module id="parent-page">
  <template>
    <span>Item count: </span><span>[[itemArray.length]]</span>
    <child-page item-array="{{itemArray}}"></child-page>
  </template>
  <script>
    Polymer({
      is: 'parent-page',
      properties: {
        itemArray: {type: Array, value: [1,2,3]}
      }
    })
  </script>
</dom-module>

<parent-page></parent-page>


[[项目]]
改变
聚合物({
是：'子页面'，
特性：{
itemArray:{type:Array，notify:true}
},
_changeArray:function（）{
this.itemArray=[4,5,6,7,8,9]；
}
})
项目计数：[[itemArray.length]]
聚合物({
是：'父页面'，
特性：{
itemArray:{type:Array，值：[1,2,3]}
}
})

顺便说一句，注意我使用的
{{…}
和
[…]]
 但是子页面已经有了这些数据，不是吗？好吧，你的意思是，我不应该触发事件？那么，如何根据更改的数组重新呈现相同的页面？如果您有数据（
newArray
），为什么不简单地更新属性？是的，您会向父级触发事件，但却让它重新生成更新数组的子页面，这有点奇怪。子页面已经知道了这一点。如果希望dom重复重新呈现，请尝试：
this.slice（'itemArray'，itemArray）解释得很好。谢谢
<dom-module id="child-page">
  <template>
    <template is="dom-repeat" items="[[itemArray]]">
      <div>[[item]]</div>
    </template>
    <div on-click="_changeArray">Change</div>
  </template>
  <script>
    Polymer({
      is: 'child-page',
      properties: {
        itemArray: {type: Array, notify: true}
      },
      _changeArray: function() {
        this.itemArray = [4,5,6,7,8,9];
      }
    })
  </script>
</dom-module>

<dom-module id="parent-page">
  <template>
    <span>Item count: </span><span>[[itemArray.length]]</span>
    <child-page item-array="{{itemArray}}"></child-page>
  </template>
  <script>
    Polymer({
      is: 'parent-page',
      properties: {
        itemArray: {type: Array, value: [1,2,3]}
      }
    })
  </script>
</dom-module>

<parent-page></parent-page>