从web-component获取数据，该web-component包含在另一个web-component中。聚合物

Question

我想做一个从请求中获取数据的web组件。所以，我已经这样做了:它在IndexedDB中进行请求保存，它工作得很好。

    <iron-ajax id="request"
               method="GET"
               headers='{"X-Requested-With": "XMLHttpRequest"}'
               verbose="true"
               url="https://jsonplaceholder.typicode.com/posts/{{token}}"
               handle-as="json"
               last-response="{{newData}}"
    ></iron-ajax>
    <app-indexeddb-mirror
            id="AppIndexedDBMirror"
            key="{{token}}"
            data="{{newData}}"
            persisted-data="{{lastData}}"
            log="true"
    >
    </app-indexeddb-mirror>

</template>
<script>
    class GetConfig extends Polymer.Element {
        static get is() { return 'get-config'; }
        static get properties() {
            return {
                token: {
                    type: String,
                    value: "",
                },
                lastData:{
                    type:Object,
                    value:"",
                    notify:true,
                },
                newData:{
                    type:Object,
                    value:""
                },

            }
        }
        ready() {
            super.ready();
            this.$.request.generateRequest();
        }

    }

    window.customElements.define(GetConfig.is, GetConfig);

</script>

接下来，我想将此组件包含在另一个组件中：

<dom-module id="my-view1">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>

    <get-config id="gc" token="5"></get-config>
    <input id="inp" value="">
    <button on-click="getConfiguration">Press</button>
  </template>
  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }
        constructor(){
          super();
        }
        getConfiguration(){
            this.$.inp.value=this.$.gc.lastData.title;
        }
    }
    window.customElements.define(MyView1.is, MyView1);

当然，如果我按下按钮，它会产生我想要的东西，但我需要让它自动完成。我的意思是，当页面加载时，应该这样做。该怎么做呢？

附注：我知道如何在一个组件中实现这一点，但我想在两个不同的组件中实现。

Answer 1

实际上，这是一种非常简单的聚合物方法。关于这一点，请阅读data system在聚合物。下面的内容可能会满足你的需求。my-view1

...
<get-config id="gc" token="5" last-data="{{lastData}}"></get-config>
   <!--Here you do not need button or js code to bind value between your custome component and input value. Here will be automatically will done upon your component loaded.--> 
   <iron-input bind-value="{{lastData.title}}"> 
    <input id="inp" value="{{lastData.title}}" /> 
   <iron-input>
...

在您的get-config组件中，添加lastData和newData值作为value:""意味着它是一个String值。删除value:""或仅删除value() {return {};}这将导致空对象。(这里不是很重要，但只需得到通知)还可以向项目添加iron-input元素，如下所示：<link rel="import" href="bower_components/iron-input/iron-input.html"> DEMO nesciunt quas odio :))