为什么 Polymer 自定义数据组件无法发送数据

Question

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
    <dom-module id="my-data">
      <script>
      ( function () {
        let dataValue = [
          {num: 'T001', status: '4', bground: 'num-sub'},
          {num: 'T002', status: '4', bground: 'num-sub'},
          {num: 'T003', status: '4', bground: 'num-sub'},
        ];
    class MyData extends Polymer.Element {
      static get is() { return 'my-data'; }
      static get properties() { return {
        data: {
          type: Array,
          value: dataValue,
          readOnly: true,
          notify: true
        }
      }}
    }
    window.customElements.define(MyData.is, MyData);
      })();
      </script>
    </dom-module>

我像上面一样创建了一个自定义元素 my-data.html。那么下面是my-app.html中的用法。可以呈现我的数据，但 my-app.html 似乎无法通过 data: Array 属性.

获取我的数据信息

 <my-data data="{{data}}"></my-data>
    <dom-repeat items="{{data}}" as="entry">
      <template>
        <my-num entry="[[entry]]" ></my-num>
      </template>
    </dom-repeat>
</template>
  <script>
    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }
      static get properties() {
        return {
          data: {
            type: Array,
          }
        }
      }
    }
    window.customElements.define(MyApp.is, MyApp);
  </script>

Answer 1

您需要先在 my-app.html 中导入 my-data.html 和 my-num.html。

示例：

<link rel="import" href="my-data.html">
<link rel="import" href="my-num.html">

此外，my-num.html 的 dom-module 中的 id 名称应为 my-name 而不是 kvs-num。

在您的 my-app.html 中也导入 dom-repeat。

<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">

Demo here

为什么 Polymer 自定义数据组件无法发送数据

why the Polymer custom data component can't send data

data-binding

custom-element

polymer-2.x