我有2个自定义子元素,我试图通过父元素传递数据。我在父html中的代码看起来像这样:
<dom-module id="parent-html">
<template>
<child-elem1 id="ch1"></child-elem1>
<child-elem2 id="ch2"></child-elem2>
</template
<script>
window.addEventListener('WebComponentsReady', function() {
class WebApp extends Polymer.Element {
static get is() { return 'web-app'; }
static get properties() {
return {
}
}
ready () {
super.ready();
this.$.ch1.datamodel = this.$.ch2;
}
}
window.customElements.define(WebApp.is, WebApp);
});
</script>
</dom-module>
正如您所看到的,我正在尝试使用父html中的ready函数将名为datamodel的第一个子元素中的对象与第二个子元素链接起来。这将允许我将数据从child-elem2传递到child-elem1中的datamodel属性。
我知道数据能够到达这个父html,但是这个链接不起作用,因为我没有在child-elem1中获取数据。
这样做的最佳方式是什么? TIA
更新:当我在child-elem1中测试[[datamodel]]中的内容时,它会显示[object HTMLElement],所以它似乎能够看到另一个子html,但截至目前仍然没有传递数据英寸
答案 0 :(得分:0)
将Object从一个子元素传递到另一个子元素是Polymer的简单方法之一。请参阅更多information:
<child-elem1 id="ch1" datamodel="{{datamodel}}" ></child-elem1>
<child-elem2 id="ch2" datamodel="{{datamodel}}" ></child-elem2>
在child-elem2
:
....
<div>At child Element -2 : [[datamodel.name]]</div>
....
class ChildElem2 extends Polymer.Element {
static get is() { return 'child-elem2'; }
static get properties() { return {
datamodel: {
type:Object,
notify:true
}
}};
static get observers() { return []}
ready() {
super.ready();
setTimeout(()=>{
this.set('datamodel.name', 'John Doe') //our famous developer Hero :)
},900)
}
}
customElements.define(ChildElem2.is, ChildElem2);
});
DEMO(类似的)