Polymer 1.0，如何将属性传递给另一个组件

Question

我不知道 Polymer 中的术语是什么，但我想将数据从一个聚合物元素传递到它在其中使用的另一个元素。

    <dom-module id="bw-boat-form">      
      <template>
          <paper-material class="material-container" elevation="1">
            <h2>{{heading}}</h2>
            <form is="iron-form">
                  <bw-image-upload image$="{{ data.image }}" ></bw-image-upload>                  
            </form>
          </paper-material>
       </template>

  <script>
        Polymer({
          is: 'bw-boat-form',
          properties: {
              data: {
                type: Object
              },
              save: {
                type: Boolean
              },
              update: {
                type: Boolean,
                value: false
              }
          }
        });
  </script>
</dom-module>

以及图片上传元素

 <dom-module is="bw-image-upload">     
  <template>
      <iron-image class="image" preload placeholder="/images/icons/placeholder.jpg" sizing="cover"></iron-image>
      <vaadin-upload
                      target="{{API_URL}}/images/upload"
                      max-files="1"
                      max-file-size="200000"
                      accept="image/*"
                      upload-success="uploadResponseHandler"
                      file-reject="errorHandler"
      >
      </vaadin-upload>
  </template>
  <script>
  Polymer({
            is: 'bw-image-upload',
            ready: function() {
                console.log(image);
            },
            uploadResponseHandler: function() {

            },
            errorHandler: function() {

            }
          })
  </script>
</dom-module>

我想将 {{ data.image }} 的值从第一个元素传递到第二个元素，以便我可以在需要时更改占位符的图像。我怎样才能做到这一点？

Answer 1

在 <bw-image-upload> 中声明 image 属性:

<dom-module is="bw-image-upload">
  ...
  <script>
    Polymer({
      is: 'bw-image-upload',
      properties: {
        image: String
      }
    });
  </script>
</dom-module>

将 image 绑定到 iron-image 的 placeholder 属性:

<dom-module is="bw-image-upload">
  <template>
    <iron-image placeholder="[[image]]"></iron-image>
  </template>
  ...
</dom-module>

从您的容器元素中，为 <bw-image-upload> 的 image 属性设置一个属性。注意：不要使用 image$=，因为该语法适用于 native element attributes，此处不适用。

<dom-module id="bw-boat-form">
  <template>
    <bw-image-upload image="{{data.image}}"></bw-image-upload>
  </template>
  ...
</dom-module>

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-image/iron-image.html">
  <link rel="import" href="paper-material/paper-material.html">
</head>

<body>
  <template id="app" is="dom-bind">
    <bw-boat-form heading="Kitty" data={{boatData}}></bw-boat-form>
  </template>
  <script>
    HTMLImports.whenReady(function() {
      console.log('ready');
      var t = document.getElementById('app');
      var boatData = {};
      boatData.image = 'http://placekitten.com/400/200';
      t.boatData = boatData;
    });
  </script>

  <dom-module id="bw-boat-form">
    <template>
      <paper-material class="material-container" elevation="1">
        <h2>{{heading}}</h2>
        <form is="iron-form">
          <bw-image-upload image="{{ data.image }}"></bw-image-upload>
        </form>
      </paper-material>
    </template>
    <script>
      Polymer({
        is: 'bw-boat-form',
        properties: {
          data: Object
        }
      });
    </script>
  </dom-module>

  <dom-module is="bw-image-upload">
    <template>
      <style>
        iron-image {
          width: 440px;
          height: 200px;
        }
      </style>
      <iron-image class="image" preload placeholder="[[image]]" sizing="cover"></iron-image>
    </template>
    <script>
      Polymer({
        is: 'bw-image-upload',
        properties: {
          image: String
        },
        ready: function() {
          console.log('bw-image-upload image', this.image);
        }
      })
    </script>
  </dom-module>

</body>

Polymer 1.0，如何将属性传递给另一个组件

Polymer 1.0, how to pass down attributes to another component

components

web

polymer

polymer-1.0