[英]Linking 2 custom elements through parent
I have 2 custom child elements that I am trying to pass data between through a parent element. 我有2个自定义子元素,我正在尝试通过父元素之间传递数据。 My code in the parent html looks something like this: 我在父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>
As you can see I am trying to use the ready function in the parent html to link an object in the first child element called datamodel with the second child element. 如您所见,我正在尝试使用父html中的ready函数将名为datamodel的第一个子元素中的对象与第二个子元素链接。 This would then allow me to pass data from child-elem2 into the property of datamodel in child-elem1. 然后,这将允许我将数据从child-elem2传递到child-elem1中的datamodel属性。
I know the data is able to reach this parent html but this link does not work as I am not getting the data in child-elem1. 我知道数据能够到达此父html,但是此链接不起作用,因为我没有在child-elem1中获取数据。
What is the best way of doing this? 最好的方法是什么? TIA TIA
Update: When I test what is in [[datamodel]] within child-elem1 it displays [object HTMLElement] so it seems like it is able to see the other child html but as of now there is still no data being passed in. 更新:当我测试child-elem1的[[datamodel]]中的内容时,它会显示[object HTMLElement],因此似乎可以看到其他子html,但到目前为止,仍然没有数据传递。
Passing an Object from one child element to another is one of the easy approaches at Polymer. 将对象从一个子元素传递到另一个子元素是Polymer的简单方法之一。 Please refer for more information : 请参阅更多信息 :
<child-elem1 id="ch1" datamodel="{{datamodel}}" ></child-elem1>
<child-elem2 id="ch2" datamodel="{{datamodel}}" ></child-elem2>
at 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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.