我正在使用 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 中，然后导入到索引文件中。
我想做的是在详细信息卡自定义元素上设置一个属性，一旦它更改其值，就在信息卡自定义元素上执行一个函数，并在另一侧使用新值。
基本上我有两列。详细信息卡显示用户购买数据的简短版本，信息卡显示购买的完整数据和规范。在这两列中，我都有一组按钮，按下时会更改状态(颜色)。我想更改两个自定义元素的颜色，即使用户只输入其中之一。我试图通过数据绑定(bind)属性并在其更改后触发函数来实现此目的，但我不知道如何同步两个自定义元素
有人可以帮我实现这个目标吗？
最佳答案
基本上，要做你要求的事情，你需要一个顶级父容器， 像这样:
<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 的更改，从而通知第二张卡。
关于javascript - 在更改时将属性发送到自定义元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46228266/