在子聚合物元素之间进行通信和传递数据的最佳方式是什么

Question

我有一个父聚合物元素基线策略选项卡。在UI上，这代表了我网站上的一个选项卡。在这个选项卡中，我有两个聚合物元素。一种是基线策略创建，这是一个带有按钮的聚合物元素。按下此按钮时，我想将事件发送到选项卡中包含的另一个子聚合物元素，基线策略ajax。此元素将发送一个ajax请求。

我尝试过通过发送CustomEvent来发送dispatchEvent，但它对我不起作用(这是我发布的关于这一点的问题：为什么在使用来自同级聚合物元素的dispatchEvent时，'；t元素没有捕获事件？(

那么，有没有其他方法可以在不使用事件的情况下在元素之间进行通信呢？

Answer 1

在聚合物中主要有两种通信方式

1.数据绑定

聚合物实现双向数据绑定。如果你在聚合物元素内部工作，并且想通过公共属性将元素"连接"在一起，这种方法是有用的

<dom-module id="my-model">
<script>
class MyModel extends Polymer.Element {
static get is() {
return 'my-model';
}
static get properties() {
return {
items: {
type: Array,
value: ['item1', 'item2']
}
};
}
}
window.customElements.define(MyModel.is, MyModel);
</script>
</dom-module>
<dom-module id="my-app">
<template>
<my-model items="{{list}}"></my-model>
<template is="dom-repeat" items="{{list}}">
<div>{{item}}</div>
</template>
</template>
<script>
class MyApp extends Polymer.Element {
static get is() {
return 'my-app';
}
static get properties() {
return {
list: {
type: Array,
}
};
}
}
window.customElements.define(MyApp.is, MyApp);
</script>
</dom-module>

2.自定义事件

此方法适用于Polymer元素内部和外部的元素。其他元素可以监听所述事件并相应地作出响应。

<dom-module id="my-element">
<script>
class MyElement extends Polymer.Element {
static get is() {
return 'my-element';
}
sayHI() {
let evt = new CustomEvent('my-element-say-hi', {
detail: {
message: 'hi'
},
bubbles: true,
composed: true
});
window.dispatchEvent(evt);
return 'Hi';
}
}
window.customElements.define(MyModel.is, MyModel);
</script>
</dom-module>
<dom-module id="my-app">
<template>
<my-element id="el"></my-element>
</template>
<script>
class MyApp extends Polymer.Element {
static get is() {
return 'my-app';
}
ready() {
super.ready();
Polymer.RenderStatus.afterNextRender(this, function() {
window.addEventListener('my-element-say-hi', e => { /* do something */ });
});
this.$.el.sayHI();
}
}
window.customElements.define(MyApp.is, MyApp);
</script>
</dom-module>

Answer 2

Polymer two中的通信有点棘手，因为Fakher先生已经说过，您可以使用Databinding，只有当您的组件处于直接的父子关系中时，Databinding才会起作用。

你也可以使用自定义事件，但你会遇到这样的问题，即你的通信只会向上进入dom树，这可能不是你想要的。

在这些情况下，通常使用的是prims事件总线，是的，这有时可能有些过头了。