Question

我有2个组件： x-container和x-item。它们的层次结构类似于＆lt;表＆gt;和＆lt; tr>或者＆lt; tr>和＆lt; td＆gt; ... 因此，x-item组件仅在它们位于x-container组件中时才有效：

<x-container>
    <x-item></x-item>
</x-container>

我想将属性值从x-container传递给x-item：

<x-container att="value">
    <x-item></x-item>
</x-container>

在这种情况下，我需要对x项可见的值 - 是否可能？谢谢！

Answer 1

如果您事先知道x-container的结构（JSBin），它就会开箱即用：

<polymer-element name="x-container" attributes="value">
  <template>
    <x-item value="{{value}}"></x-item>
  </template>
  <script>
    Polymer('x-container', {
      value : null,
      ready: function() {
      }
    });
  </script>
</polymer-element>

<polymer-element name="x-item" attributes="value">
  <template>
    <div>x-item value:{{value}}</div>
  </template>
  <script>
    Polymer('x-item', {


    });
  </script>
</polymer-element>

<x-container value="test"></x-container>

如果您想动态创建x-container和x-item的关系，请参阅以下SO主题：

Data-binding between nested polymer elements

Using template defined in light dom inside a Polymer element

What is the best way to implement declarative collection rendering with Polymer?

聚合：将属性从容器组件传递到项组件

1 个答案: