Question

我有以下元素，它们只有一个属性，元素本身设置：

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="test-element-1">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]!</h2>
  </template>

  <script>
    /**
     * `test-element-1`
     * Test Element 1
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class TestElement1 extends Polymer.Element {
      static get is() { return 'test-element-1'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'test-element-1',
            notify: true,
            readOnly: true
          }
        };
      }
    }

    window.customElements.define(TestElement1.is, TestElement1);
  </script>
</dom-module>

我希望第二个元素能够使用相同的数据：

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="test-element-2">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]!</h2>
  </template>

  <script>
    /**
     * `test-element-2`
     * Test Element 2
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class TestElement2 extends Polymer.Element {
      static get is() { return 'test-element-2'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            notify: false,
            readOnly: false
          }
        };
      }
    }

    window.customElements.define(TestElement2.is, TestElement2);
  </script>
</dom-module>

我希望测试元素2能够从测试元素1中获取prop1的值：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>test-element-2 demo</title>

    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
    <link rel="import" href="../test-element-2.html">
    <link rel="import" href="../../test-element-1/test-element-1.html">

    <custom-style>
      <style is="custom-style" include="demo-pages-shared-styles">
      </style>
    </custom-style>
  </head>
  <body>
    <div class="vertical-section-container centered">
      <h3>Basic test-element-2 demo</h3>
      <demo-snippet>
        <template>
          <test-element-1 prop1="{{prop1Value}}"></test-element-1>
          <test-element-2 prop1="{{prop1Value}}"></test-element-2>
        </template>
      </demo-snippet>
    </div>
  </body>
</html>

这里是我演示的输出：

我做错了什么？

Answer 1

由于您使用index.html或任何其他HTML页面来显示聚合物元素的值，因此无法绑定prop1Value的值。

如果你使用polymer-element做同样的事情，那肯定会有效。

如果将属性添加到数据绑定或属性，则会隐式声明属性   将其添加为观察者，计算属性或计算的依赖项   结合。

Polymer会自动为这些隐式声明创建setter   属性。但是，隐式声明的属性不能   从标记配置。

Answer 2

问题由@Osifara解释，如果你想要与子组件共享属性，你需要将顶级父组件作为web组件，你需要做这样的事情：

<body>
    ......the other code

    <dom-module id="my-index">
        <template>
            <demo-snippet>
                <template>
                    <test-element-1 prop1="{{propIndexTest}}"></test-element-1>
                    <test-element-2 prop1="{{propIndexTest}}"></test-element-2>
                </template>
            </demo-snippet>
        </template>
    </dom-module>
    <my-index></my-index>
    ......the other code
</body>
<script>
    class MyIndex extends Polymer.Element {
        static get is() {
            return 'my-index';
        }
        static get properties() {
            return {
                propIndexTest: {
                    type: String,
                    value: 'We are sharing the same value'
                    notify: false
                }
            };
        }
    }

    window.customElements.define(MyIndex.is, MyIndex);
</script>

所以现在成为您的顶级父容器，然后您可以使用Polymer来处理它。

如何在Polymer 2.0中的两个元素之间共享数据

2 个答案: