Question

我有三种聚合物组分（聚合物1.2）。 他们都坐在自己的文件中因此ProxyRequests Off ProxyPreserveHost On ProxyPass / http://127.0.0.1:8000/ ProxyPassReverse / http://127.0.0.1:8000/ <Location /> # ProxyPassReverse / Order deny,allow Allow from all </Location>和is-logged-in必须从一个组件传递到另一个组件。

我把它们放在一起，这样你就可以更容易地理解我的问题了：

login-name

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

<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只是一个空字符串。

检查DOM document.querySelector("component3").loginName和is-logged-in时，不再显示login-name

如何将数据传递到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.

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

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

1 个答案: