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

Question

我有一个父聚合物元素 baseline-policies-tab。这在 UI 上表示我网站上的一个选项卡。在此选项卡中，我有两个聚合物元素。一个是 baseline-policies-create，这是一个带有按钮的聚合物元素。按下此按钮时，我想将事件发送到选项卡 baseline-policy-ajax 中包含的另一个子聚合物元素。此元素将发送 ajax 请求。

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

那么有没有另一种不使用事件在元素之间进行通信的方法？

Answer 1

polymer中主要有两种通信方式

1.数据绑定

Polymer 实现双向数据绑定。如果您在 Polymer 元素内部工作并希望通过 public properties

将“link”元素组合在一起，则此方法很有用

<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 2 中的通信有点棘手，因为 Fakher 先生已经说过您可以使用 Databinding，它只有在您的组件处于直接父子关系中时才有效。

您也可以使用自定义事件，但是您会遇到这样的问题，即您的交流只会向上 dom 树，这可能不是您要找的东西。

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

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

What is the best way to communicate and pass data between child polymer elements?

javascript

polymer

polymer-2.x