我正在使用Polymer开发一个Web应用程序。在我的index.html中,我有2个自定义元素,如下所示

...
<body unresolved>
...
    <template is="dom-bind" id="app">
        <detail-card></detail-card>
        <information-card></information-card>
    </template>
...
</body>


这两个自定义元素都位于其自己的html文件detail-card.htmlinfromation-card.html中,然后导入到索引文件中。
我要做的是在明细卡自定义元素上设置一个属性,一旦它更改其值,就在信息卡自定义元素上执行功能,而新值在另一侧。

基本上我有2列。详细信息卡显示了用户购买的数据的简短版本,信息卡显示了购买的完整数据和说明。在这两列中,我都有一组按钮,这些按钮在按下时会更改状态(颜色)。我想更改两个自定义元素的颜色,即使用户仅在其中之一中输入内容。我试图通过数据绑定属性来执行此操作,并在功能更改后触发函数,但是我不知道如何同步两个自定义元素

谁能帮我实现这一目标?

最佳答案

基本上,按照您的要求,您需要一个顶级父容器,
就像是:

<dom-module id="parent-card">
    <template>
        <detail-card prop-color="{{propColor}}"></detail-card>
        <information-card prop-color="{{propColor}}"></information-card>
    </template>
</dom-module>
<script>
    class ParentCard extends Polymer.Element {
        static get is() {
            return 'parent-card';
        }
        static get properties() {
            return {
                propColor: {
                    type: String,
                    notify: false
                }
            };
        }
    }

    window.customElements.define(ParentCard.is, ParentCard);
</script>


两张卡中都应具有另一个属性propColor,
在其中一张卡片上更改颜色时,可能会按下按钮,
将新值设置为propColor,这将触发对父组件ParentCard的更改,该更改将通知第二张卡。

10-07 19:03
查看更多