Javascript 聚合物3.0数据绑定

我很难理解聚合物中的数据绑定是如何工作的。我已经检查了文档和之前的一些问题，但仍然：

我有一个主机和一个子元素。子页面是一个注册/登录页面，它向api发送一个ajax请求，或者注册一个新用户，或者为用户接收一个令牌。用户数据（名称和令牌）保存在storedUser对象的元素属性中。我需要的是父元素（MyApp）可以看到这个storedUser对象

我真的很感激你能帮助我理解

主机（简化）：

类MyApp扩展了聚合关系{
静态获取模板（）{
返回html`
{{这里需要来自子元素的storedUser的一些数据}
`;
}
...
静态获取属性（）{
返回{
第页：{
类型：字符串，
reflectToAttribute:true，
观察者：''u pageChanged'
},
routeData:对象，
子例程：对象，
用户：{
类型：对象，
通知：正确
}
};
}
...
}

儿童：

class RegisterLogin extends PolymerElement {
    static get template() {
      return html`

        <div class="card">
        <div id="unauthenticated" hidden$="[[storedUser.loggedin]]">
          <h1>Log In</h1>

          <p>
            <strong>Log in</strong> or
            <strong>sign up</strong> to access!</p>
        <template is="dom-if" if="[[error]]">
            <p class="alert-error"><strong>Error:</strong> [[error]]</p>
        </template>
          <paper-input-container>
            <label slot="input">Username</label>
            <iron-input slot="input" bind-value="{{formData.username}}">
              <input id="username" type="text" value="{{formData.username}}" placeholder="Username">
            </iron-input>
          </paper-input-container>

          <paper-input-container>
            <label>Password</label>
            <iron-input slot="input" bind-value="{{formData.password}}">
              <input id="password" type="password" value="{{formData.password}}" placeholder="Password">
            </iron-input>
          </paper-input-container>

          <div class="wrapper-btns">
            <paper-button raised class="primary" on-tap="postLogin">Log In</paper-button>
            <paper-button class="link" on-tap="postRegister">Sign Up</paper-button>
          </div>
        </div>
        <div id="authenticated" hidden$="[[!storedUser.loggedin]]">
          <h2>Hello, [[storedUser.name]]!</h2>
          <p>You are now logged in. You can access <a href="[[rootPath]]secret-content">Secret Content</a>!</p>
        </div>
      </div>
      `;
    }

    static get properties() {
      return {
        formData: {
          type: Object,
          value: {}
        },
        storedUser: Object,
        error: String
      }
    }

    handleUserResponse(event) {
      var response = JSON.parse(event.detail.response);

      if (response.id_token) {
        this.error = '';
        this.setProperties(
          {
            storedUser: {
              name: this.formData.username,
              id_token: response.id_token,
              access_token: response.access_token,
              loggedin: true
            },
          }
        )
      }
      // reset form data
      this.formData = {};
    }

    handleUserError(event) {
      this.error = event.detail.request.xhr.response;
    }
  }

class RegisterLogin扩展了聚合关系{
静态获取模板（）{
返回html`
登录

登录或
注册访问

错误：[[error]]
用户名
密码
登录
注册
你好，[[storedUser.name]]！
您现在已登录。您可以访问

`;
}
静态获取属性（）{
返回{
表格数据：{
类型：对象，
值：{}
},
storedUser:对象，
错误：字符串
}
}
handleUserResponse（事件）{
var response=JSON.parse（event.detail.response）；
if（response.id\u令牌）{
this.error=''；
这是setProperties(
{
storedUser：{
名称：this.formData.username，
id\u令牌：response.id\u令牌，
访问令牌：response.access\u令牌，
洛格丁：是的
},
}
)
}
//重置表单数据
this.formData={}；
}
handleUserError（事件）{
this.error=event.detail.request.xhr.response；
}
}

我假设您这里的代码是一个简化版本，除了

storedUser

之外，其他一切都正常工作

之所以

storedUser

不更新

MyApp

中的值，是因为它是单向向下绑定（从MyApp到RegisterLogin）

要修复它，我们可以将

storedUser

作为两种方式绑定，在RegisterLogin中进行的更改是：

class RegisterLogin extends PolymerElement {
    // ...
    static get properties() {
      return {
        // ...
        storedUser: { type: Object, value: {}, notify: true },

      }
   }
}

在父母中

class RegisterLogin extends PolymerElement {
    // ...
    static get properties() {
      return {
        // ...
        storedUser: { type: Object, value: {}, notify: true },

      }
   }
}