Question

我有一个非常简单的设置，其中父组件有一堆子组件。父组件有一个pageTitle属性，我想从正在显示的子组件更新。

所以基本上我有一个带有页面标题的标题，我想根据正在显示的组件进行更新。

这是父组件：

<dom-module id="my-parent">

  <template>

      <h1>Page title: {{pageTitle}}</h1>

      <a on-tap="changePage" data-page="1">Go to page 1</a><br />
      <a on-tap="changePage" data-page="2">Go to Page 2</a>

      <iron-pages selected="[[page]]" attr-for-selected="data-page>
        <my-child1 data-page="1" page-title="{{pageTitle}}"></my-child1>
        <my-child2 data-page="2" page-title="{{pageTitle}}"></my-child2>
      </iron-pages>
  </template>

  <script>
    Polymer({
      is: 'my-parent',
      properties: {
        page: {type: String, value: "1"},
        pageTitle: {type: String},
      },
      changePage: function(e) {
        var elm = e.currentTarget;
        this.page = elm.getAttribute("data-page");
      }
    });
  </script>

</dom-module>

这是一个孩子的例子：

<dom-module id="my-child1">

  <template>
      <p>We are on page 1</p>
  </template>

  <script>
    Polymer({
      is: 'my-child1',
      properties: {
        pageTitle: {type: String, notify: true, value="Page 1"},
      }
    });
  </script>

</dom-module>

现在，我怎样才能实现以下目标：＆＃34;当显示my-child1时，更新父母的pageTitle属性＆＃34;？

Answer 1

啊，我找到了解决办法。我不得不使用attributeChanged事件，并根据＆＃34;铁选择＆＃34;检查类名。

以下是使其有效的子组件：

<dom-module id="my-child1">

  <template>
      <p>We are on page 1</p>
  </template>

  <script>
    Polymer({
      is: 'my-child1',
      properties: {
        pageTitle: {type: String, notify: true},
      },
      attributeChanged: function(name, type) {
        if (name == "class" && this.getAttribute(name) == "iron-selected") {
          this.set("pageTitle", "Page 1");
        }
      },
    });
  </script>

</dom-module>

聚合物：如何从孩子那里改变父母的财产？

1 个答案: