在同一页面中使用一对Polymer Component两次不起作用

Question

我是Polymer的新手。我使用两种不同的聚合物组件相互通信。我必须做两次（2 x 2组件）。

以下代码仅使用一对不同的组件，它可以工作：

<dom-bind id="dombind">
  <template is="dom-bind">

    <polymer-componentA id="polymercomponentA_1" 
        attribute="[[x]]" 
        attribute="[[x]]" 
        attribute="{{x}}">  
    </polymer-componentA>
    <polymer-componentB id="polymer-componentB_1"
        attribute="{{x}}"> 
    </polymer-componentB>

  </template>
</dom-bind>

但是当我添加其他组件时，它开始工作不好。我认为他们使用相同的组件（而不是独立）：

<dom-bind id="dombind">
  <template is="dom-bind">

    <polymer-componentA id="polymercomponentA_1" 
        attribute="[[x]]" 
        attribute="[[x]]" 
        attribute="{{x}}">  
    </polymer-componentA>
    <polymer-componentB id="polymer-componentB_1"
        attribute="{{x}}"> 
    </polymer-componentB>

  </template>
</dom-bind>

<dom-bind id="dombind">
  <template is="dom-bind">

    <polymer-componentA id="polymercomponentA_2" 
        attribute="[[x]]" 
        attribute="[[x]]" 
        attribute="{{x}}">  
    </polymer-componentA>
    <polymer-componentB id="polymer-componentB_2"
        attribute="{{x}}"> 
    </polymer-componentB>

  </template>
</dom-bind>

我知道这样做不好，但我没有找到关于此的好例子。 什么是使用两个polmyer组件的正确方法？ 提前谢谢！

Answer 1

  

如果提供函数，Polymer会为每个元素调用一次函数   实例

     

将属性初始化为对象或数组值时，请使用a   函数确保每个元素都获得自己的值副本，   而不是在所有实例之间共享对象或数组   元素。

来源：https://www.polymer-project.org/2.0/docs/devguide/properties#configure-values

示例

 static get properties() {
    return {
      data: {
        type: Object,
        value: function() { return {}; }
      }
    }
  }