Question

我继续遇到关于在Polymer 2.0中从父级调用子事件的错误示例或过时的1.0文档。基本上我想要完成的就是从父级触发子事件。但是，当调用“this”时，我似乎也无法在父元素的树结构中找到引用。

的index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="import" href="/elements/parent-element.html">
</head>
<body>
    <parent-element></parent-element>
    <script src="js/polymer.js"></script>
</body>
</html>

父 - element.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="./child-element.html">
<dom-module id="parent-element">

  <template>
    <div>
      parent
      <child-element></child-element>
     </div>
  </template>

  <script>
    class ParentElement extends Polymer.Element {
        constructor(){
            super()

        }

      callChildEvent(){
        // call event
      }

        static get is() { 
            return "parent-element"; 
        }
    }
    customElements.define(ParentElement.is, ParentElement);
  </script>
</dom-module>

儿童-element.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="child-element">
  <template>
    <div on-click="customEvent">
        child element
    </div>
  </template>
  <script>
    class ChildElement extends Polymer.Element {
        constructor(){
            super()
        }

        childEvent(){
            console.log('event fired');
        }

        static get is() { 
            return "child-element"; 
        }
    }
    customElements.define(ChildElement.is, ChildElement);
  </script>
</dom-module>

感谢您的帮助！

Answer 1

为

提供ID

<child-element id="childEl"></child-element>

并在父母处激活子元素功能，如：

this.$.childEl.childEvent();

Answer 2

这是我的聚合物3.0组件模板的样子。

 static get template() {
     return html`
       <my-component id="myComponent" />
     `
 }

现在要调用我的组件类中的任何方法，我就是这样做的。

  this.$.myComponent.myMethod();

在myComponent之后的$是id的{{1}}。

Polymer 2.0从父级调用子事件

2 个答案: