在更改时将属性发送到自定义元素

Question

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

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

两个自定义元素都位于其自己的 html 文件 detail-card.html 和 infromation-card.html 中，然后导入到索引文件中。我想要做的是在详细信息卡自定义元素上设置一个属性，一旦它更改其值以在另一侧使用新值在信息卡自定义元素上执行一个函数。

基本上我有 2 列。 detail-card 显示用户购买数据的简短版本，而 information-card 显示完整的购买数据和规格。在这两列中，我都有一组按钮，按下时会更改状态（颜色）。即使用户只输入其中一个，我也想更改两个自定义元素的颜色。我试图通过数据绑定属性来做到这一点，并在它发生变化后触发一个函数，但我不知道如何同步两个自定义元素

谁能帮我实现这个目标？

Answer 1

基本上，要完成您的要求，您需要一个顶级父容器，类似于：

<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 的更改，该组件将通知第二张卡片。

在更改时将属性发送到自定义元素

Send attribute to custom element on change

javascript

polymer