Question

my-app是一个自定义元素，其中包含两个需要相互通信的自定义元素。当我单击标题元素上的按钮时，我希望抽屉元素打开/关闭。我试图使用数据绑定进行消息传递，但我无法让它工作。

我想我可能不得不使用铁信号，但我想知道为什么数据绑定在这种情况下不起作用。

父元素 - 我的应用

<dom-module id="my-app">
    <template>
        <app-header-layout has-scrolling-region>
            <my-header drawer-active="{{drawerState}}"></my-header>
            <div id="main-content" class="">
                <div class="imgWrap"><img src="../images/banner.jpg"></img>
                </div>
            </div>
            <my-drawer drawer-opened="{{drawerState}}"></my-drawer>
        </app-header-layout>
    </template>
    <script>
    Polymer({
        is: 'my-app',
        properties: {
            drawerState: {
                type: Boolean,
                value: false,
                notify: true
            }
        }
    });
    </script>
</dom-module>

子元素 - 我的标题

<dom-module id="my-header">
    <template>
        <app-header>
            <app-toolbar>
                <div class="logo"><img src="../images/logo.svg"></img>
                </div>
                <paper-icon-button icon="menu" on-tap="toggleDrawer"></paper-icon-button>
            </app-toolbar>
        </app-header>
    </template>
    <script>
    Polymer({
        is: 'my-header',
        properties: {
            drawerActive: {
                type: Boolean,
                value: false,
                notify: true
            }
        },
        toggleDrawer: function() {

            this.drawerActive = !this.drawerActive;
        }
    });
    </script>
</dom-module>

子元素 - 我的抽屉

<dom-module id="my-drawer">
    <template>
        <app-drawer align="end" opened="{{drawerOpened}}">
            <paper-menu> ... </paper-menu>
        </app-drawer>
    </template>
    <script>
    Polymer({
        is: 'my-drawer',

        properties: {
            drawerOpened: {
                type: Boolean,
                value: false,
                notify: true
            }
        }

    });
    </script>
</dom-module>

Answer 1

问题已解决。我的导入错误。请参阅有关该问题的评论。

数据绑定 - 在另一个自定义元素中的2个自定义元素之间进行通

1 个答案: