向下传递超过两个组件时数据会丢失

Question

我有三个 Polymer 组件 (Polymer 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>

所有 3 个组件都具有这些属性：

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 范围内，因此在该范围内设置值会将值设置为所有绑定。

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

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

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

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

数据必须从一个组件传递到另一个组件的唯一时间是在跨越范围时（范围定义了数据的边界，所以希望这是有意义的）。

向下传递超过两个组件时数据会丢失

Data is lost when passing it down more than two components

javascript

web-component

polymer

polymer-1.0