来自父代的Polymer 2.0呼叫子事件 [英] Polymer 2.0 call child event from parent

查看:78
本文介绍了来自父代的Polymer 2.0呼叫子事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

关于在Polymer 2.0中从父级调用子级事件,我一直遇到一些不好的例子或过时的1.0文档.基本上,我要完成的就是从父级触发子级事件.但是当调用"this"时,我似乎也找不到在父元素的树结构中找到引用.

I keep running into bad examples or outdated 1.0 docs regarding calling child event from the parent in Polymer 2.0. Essentially all I want to accomplish is triggering a child event from the parent. But I also can not seem to find a reference in the tree structure of the parent element as well when call "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>

感谢您的帮助!

推荐答案

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

并在父级上触发子元素功能,如:

And fire child element function at parent like:

this.$.childEl.childEvent();

这篇关于来自父代的Polymer 2.0呼叫子事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆