数据在传递两个以上组件时丢失。

Question

我有三个聚合物组分(聚合物1.2)。--它们都位于自己的文件中--，因此is-logged-in和login-name必须从一个组件传递到另一个组件。

我把它们放在这里，这样你就能更容易地理解我的问题：

<component1 is-logged-in="true" login-name="Cool Cat">
  <component2 is-logged-in="{{isLoggedIn}}" login-name="{{loginName}}">
    <component3 is-logged-in="{{isLoggedIn}}" login-name="{{loginName}}"></component3>
  </component2>
</component1>

所有三个组件都具有以下属性：

properties: {
  isLoggedIn: {
    type: Boolean,
    value: false
  },
  loginName: {
    type: String,
    value: ""
  }
}

document.querySelector("component2").loginName是Cool Cat，但是document.querySelector("component3").loginName只是一个空字符串。

当检查DOM时，is-logged-in和login-name不再出现在<component2>

如何将数据传递给component3 ?

Answer 1

所有{{ }}绑定都必须驻留在template中，它是标识值的作用域的模板。其他父子关系不定义作用域。

在您的示例中，所有的component-1/2/3都在同一个模板中，因此在相同的范围内。component-1的设置属性对component-2和component-3没有影响，它们不结合在一起。

换句话说，{{isLoggedIn}}和{{loginName}}宏绑定到包含模板标识的作用域中的属性(作用域通常是元素，但也可以是dom-repeat或其他专门模板)。

我不认为这实际上是你想要的，但为了清晰起见，这样的方法会奏效：

<dom-module id="component-0">
  <template>
    <component-1 is-logged-in="{{isLoggedIn}}" login-name="{{loginName}}">
      <component-2 is-logged-in="{{isLoggedIn}}" login-name="{{loginName}}">
        <component-3 is-logged-in="{{isLoggedIn}}" login-name="{{loginName}}"></component-3>
      </component-2>
    </component-1>
...
<script>
  Polymer({
    is: 'component-0',
    properties {
      isLoggedIn: {value: true},
      loginName: {value: "cool-cat"}
    }
</script>

所有{{ }}绑定都在component-0作用域中，因此在该作用域中设置值将值设置为所有绑定。

Fwiw，如果将共享数据聚合到一个对象中，您可能也会有更轻松的时间。

    <component-1 login="{{login}}">
      <component-2 login="{{login}}">
        <component-3 login="{{login}}"></component-3>

例如login = {isLoggedIn: true, loginName: "cool-cat"}。

在此构造中，必须将数据从一个组件传递到另一个组件的想法并不正确。如果您的目标仅仅是将数据绑定到component-3，则可以直接绑定数据并忽略1和2。

数据必须从一个组件传递到另一个组件的唯一时间是在跨越作用域时(范围定义了数据的边界，因此希望这是有意义的)。