javascript - Polymer 2.0 从父级调用子级事件

标签 javascript polymer

我不断遇到关于在 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>

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>

感谢您的帮助!

最佳答案

给一个id给

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

然后在父级触发子元素函数,例如:

this.$.childEl.childEvent();

关于javascript - Polymer 2.0 从父级调用子级事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47783258/

相关文章:

javascript - Mongoose - 检索到的文档中没有 '_id' 属性

css - 为什么我的 Polymer 自定义 CSS 属性不起作用?

javascript - 纸波纹阻止点击容器元素并且不适合

javascript - 停止多个动画直到另一个动画完成

javascript - 如何去除D3气泡图中的外圈

javascript - 如何克隆 dom 的元素或 block ?

javascript - Polymer iron-ajax 间隔调用

javascript - 在这种情况下,将对象引用传递到 Date.toLocaleString() 中,TypeScript linter 到底要求什么?

javascript - 有没有一种方法可以将 Slick-Carousel 与 Polymer.js 一起使用?

dart - 从AngularDart访问 polymer 事件