Question

我有一个名为parent-element的元素，其中包含一个名为name的属性。

parent-element有一个名为child-element的子元素。两者都有一个名为name

的双向绑定属性

添加代码段来解释我上面说的内容

<parent-element>
  <template>
    <child-element name={{name}}> </child-element>
  </template>
 <script>
   properties: {
    name: String
    }
 </script>
</parent-element>

我的问题：

我希望parent-element等到child-element执行并发送回属性name（或），每次{{1}之后至少必须重新呈现parent-element }}为child-element属性发送新值。

有没有关于如何做到这一点的例子？

Answer 1

您应该在子元素中将notify标记为true，并在父元素的name属性上添加观察者。这样，只要子元素中的属性发生更改，您的父级将会收到通知。请注意，您需要从父母到孩子进行双向绑定才能使其正常工作。如果您不希望父级更新子级的属性标记子级name 属性为readOnly

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">

<dom-module id="child-element">
  <template></template>
</dom-module>
<script>
  Polymer({
    is: 'child-element',
    properties: {
      name: {
        type: String,
        notify: true
      }
    },
    attached: function() {
      this.name = "John";
    }
  });
</script>



<dom-module id="parent-element">
  <template>
    [[name]]
    <child-element name="{{name}}"></child-element>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'parent-element',
    properties: {
      name: {
        type: String,
        value: "James",
        observer: '_nameChanged'
      }
    },
    _nameChanged: function(newVal) {
      console.log("Name is", this.name);
    }
  });
</script>

<parent-element></parent-element>

Polymer - 使父元素等待，直到子元素完成执行

1 个答案: