Question

我有一个父聚合物元素 baseline-policies-tab 。在用户界面上，它代表我网站上的标签。在此选项卡中，我有两个聚合物元素。一个是 baseline-policies-create ，它是带有按钮的聚合物元素。按下此按钮后，我想将事件发送到选项卡 baseline-policy-ajax 中包含的另一个子聚合物元素。该元素将发送一个ajax请求。

我已经尝试通过发送CustomEvent来尝试dispatchEvent，但是它对我不起作用（这是我发布的与此有关的问题：Why doesn't element catch event when using dispatchEvent from sibling polymer element?）

那么还有另一种方法可以在不使用事件的情况下在元素之间进行通信吗？

Answer 1

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

1。数据绑定

Polymer实现双向数据绑定。如果您在Polymer元素内部工作，并且希望通过公共属性将元素“链接”在一起，则此方法很有用

<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

第二种聚合物中的通讯有些棘手，因为Fakher先生已经指出您可以使用Databinding，它仅在您的组件具有直接父子关系时才有效。

您还可以使用自定义事件，但是这样的问题是，您的通信只会沿dom树上升，而这可能不是您想要的。

在这些情况下倾向于使用的是prims-event-bus。

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

2 个答案: