<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
屬性獲取我的數據信息。爲什麼Polymer自定義數據組件無法發送數據
<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>
是這個嗎?請參閱https://www.polymer-project.org/2.0/docs/devguide/templates#dom-repeat關於如何使用dom-repeat聚合物管理的模板。例如,請參閱https://codepen.io/johnthad/pen/zEzVLm。 – Thad
如果你要改變'my-data'中數組或對象的數據,你必須通知父元素。這可以使用Polymer的'this.set(...)'以'this.set('data',dataValue)'的方式處理。請參閱https://www.polymer-project.org/2.0/docs/devguide/model-data#set-path –