Polymer：在兄弟页面（元素）之间传输数据答案

【问题标题】：Polymer: Transfer data between sibling pages(elements)Polymer：在兄弟页面（元素）之间传输数据
【发布时间】：2023-04-02 16:13:01
【问题描述】：

我需要在聚合物应用程序的两个同级元素之间传输数据的帮助。我不能让其中一个成为父级，以便我可以使用 dispatchEvent 来传输这些元素。

有没有办法在聚合物中的两个同级元素之间传输数据？

【问题讨论】：

请添加您的代码您想如何使用它。另外，检查一下是否给你一个你需要的答案：stackoverflow.com/questions/48803316/…

标签： polymer

【解决方案1】：

当然，例如你可以使用DataBinding：

<some-element param="{{value}}"></some-element>
<another-element param="{{value}}"></another-element>

在这些元素中，您可以更改此“值”参数，它将在另一个中更改：

<script>
class ... 
 changeParam(){
this.param="newValue";
}
</script>

另一种方法是使用事件。但是你不需要发送它。例如：

class ....
static get properties(){
 return {
  prop:{
   type: Object,
   value: {},
   notify: true // (*)
 }
}

与 * 一致可以看到 notify 属性。它会在道具更改时触发事件“道具更改”。所以你可以为这个事件添加EventListener。注意： somePropertyWhichCanBeChanged 更改为 some-property-which-can-be-changed-changed 事件。

【讨论】：

你在哪里调用你的函数？
我建议你阅读这个：polymer-project.org/2.0/docs/devguide/data-binding 和这个：polymer-project.org/2.0/docs/devguide/properties
我在模板中有点击功能
这个数据绑定现在可以工作了，但我真的很想看到第二种解决方案的完整示例。从未听说过这种数据传输方法
嗯，现在我没有 IDE，但它应该可以像这样工作。类 ... ready(){ super.ready(); this.addEventListener('event-value-changed', function(e){ console.log("接收值..."); }); } 另一个元素类 ... static get properties(){ return { eventValue:{ type: Object, value: {}, notify: true // (*) } } change(){ this.eventValue="newValue" }

【解决方案2】：

我的代码：

<my-view1 name="view1" param="{{value}}"></my-view1>
      <my-view2 name="view2" param="{{value}}"></my-view2>

视图1：

static get properties(){

    return {
        eventValue: {
            type: String,
            value: "Mirza",
            notify: true
        }
    }
  }

  changeParam(){
    this.param = "Azrim";
    this.eventValue = "Mirzoni";
    console.log("Param in view1: " + this.param);
    console.log("EventValue in view1: " + this.eventValue);
  }

视图2：

static get is() { return 'my-view2'; }


  seeParam(){
    console.log("Param in view2: " + this.param);
    this.addEventListener('event-value-changed', function(e){
        console.log("Receiving value...");
    });
  }

【讨论】：