Polymer2.0父组件调用子组件的方法

最新推荐文章于 2024-03-17 09:32:24 发布

原创最新推荐文章于 2024-03-17 09:32:24 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

polymer 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了使用Polymer框架进行Web组件开发时，父组件如何调用子组件的方法实现通信的过程。通过具体代码示例，展示了自定义元素的定义、注册及使用方式，以及组件间的事件触发与响应机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

        <test-element id="test"></test-element>
    </template>
    <script>
        class MyElement extends Polymer.Element{
            static get is () { return "my-element"; }
            connectedCallback(){
                super.connectedCallback();
                this.$.test.alert();
            }
        }
        customElements.define( MyElement.is, MyElement);
    </script>
</dom-module>
<my-element></my-element>


//child
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<dom-module id="test-element">
    <script>
        class TestElement extends Polymer.Element{
            static get is () { return "test-element"; }
            alert(){
                alert('TEST');
            }
        }
        customElements.define( TestElement.is, TestElement);
    </script>
</dom-module>