Polymer 2.0 从 parent 调用 child 事件

Question

我将运行保存在关于从 Polymer 2.0 中的 parent 调用 child 事件的错误示例或过时的 1.0 文档中。基本上我想要完成的是从 parent 触发一个 child 事件。但是在调用 "this".

时，我似乎也无法在 parent 元素的树结构中找到引用

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>

parent-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>

child-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

这是我的 Polymer 3.0 组件模板的样子。

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

现在调用我的组件中的任何方法 class，我这样做。

  this.$.myComponent.myMethod();

$之后的myComponent是my-component的id。

Polymer 2.0 从 parent 调用 child 事件

Polymer 2.0 call child event from parent

javascript

polymer