Question

我有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，但截至目前仍然没有传递数据英寸

Answer 1

将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（类似的）

通过父级链接2个自定义元素

1 个答案: