在同一页面中两次使用一对聚合物组件不起作用

Question

我是 Polymer 的新手。我正在使用两个相互通信的不同 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

If you provide a function, Polymer calls the function once per element instance.

When initializing a property to an object or array value, use a function to ensure that each element gets its own copy of the value, rather than having an object or array shared across all instances of the element.

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

例子

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

在同一页面中两次使用一对聚合物组件不起作用

Using a pair of Polymer Component twice in the same page doesnt work

polymer

polymer-2.x