Javascript 将数据传递到两个以上的组件时会丢失数据

我有三种聚合物成分（聚合物1.2）。 它们都位于自己的文件中因此，

被登录

并且

登录名

必须从一个组件传递到另一个组件

我将它们放在这里，以便您更容易理解我的问题：

<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>

document.querySelector（“component2”）.loginName是
Cool Cat
但是
document.querySelector（“component3”）.loginName
只是一个空字符串

当检查DOM
是否已登录时
和
登录名
从

如何将数据传递到component3？
所有
{{}
绑定都必须位于
模板中，而模板标识值的范围。其他父子关系不定义范围

在您的示例中，所有
组件-1/2/3
都在同一模板中，因此在同一范围内。设置
组件1
的属性对
组件2
和
组件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>

其中，例如，
login={isLoggedIn:true，loginName:“cool cat”}

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

必须将数据从一个组件传递到另一个组件的唯一时间是在跨越作用域时（作用域定义了数据的边界，因此希望这是有意义的）。
尝试只定义属性类型，而不设置默认值
值。我认为itI中的问题已经尝试过了，但也不起作用。您是否尝试过在元素内部
console.log（this.loginName）
？我不相信
document.querySelector
会搜索影子DOM。
<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-1 login="{{login}}">
      <component-2 login="{{login}}">
        <component-3 login="{{login}}"></component-3>