假设我有两个兄弟元素,
<element-b>
触发一个事件。如何让 <element-a>
在不必向父级添加命令式代码的情况下监听该事件?<dom-module id="parent-element">
<element-a></element-a>
<element-b></element-b>
</dom-module>
其中<element-a>
和<element-b>
是:
<dom-module id="element-a">
<template>
<style include="shared-styles">
</style>
</template>
<script>
Polymer({
is: 'element-a',
listeners: {
'element-b': 'handleEvent',
},
ready: function() {
console.log('fired from element a')
this.fire('element-a', {employee: ''});
},
handleEvent: function (e) {
console.log('received element b event', e)
}
});
</script>
</dom-module>
<dom-module id="element-b">
<template>
<style include="shared-styles">
</style>
</template>
<script>
Polymer({
is: 'element-b',
listeners: {
'element-a': 'handleEvent',
},
ready: function() {
console.log('fired from element b')
this.fire('element-b', {employee: ''});
},
handleEvent: function (e) {
console.log('received element a event', e)
}
});
</script>
谢谢!
<iron-signals>
可以减少代码大小,但代价是可维护性下降。在更复杂的示例中,如果element-a
和element-b
不是直接兄弟关系而是远房亲戚,<iron-signals>
仍然可以工作,但可能更难理解您的代码。 - tony19