Question

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

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

Answer 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 // (*)
 }
}

与*一致，您可以看到通知属性。当你可以弄清楚道具改变的时候，它会触发事件“道具改变”。所以你可以为这个事件添加事件。注意：somePropertyWhichCanBeChanged更改为some-property-which-be-changed-changed事件。

Answer 2

我的代码：

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

VIEW1：

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...");
    });
  }

聚合物：在兄弟页面（元素）之间传输数据

2 个答案: