首页 文章

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

提问于
浏览 次
1

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

我've tried dispatchEvent by sending a CustomEvent but it didn'为我工作（这是我发布的关于这个问题：Why doesn't element catch event when using dispatchEvent from sibling polymer element?）

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

javascript polymer polymer-2.x

2 回答

  • 0

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

    1. Data binding

    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. Custom events

    此方法适用于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>
    回复于
  • 0

    聚合物二中的通信有点棘手，因为Fakher先生已经声明您可以使用Databinding，只有当您的组件处于直接的父子关系时才会起作用 .

    此外，您可以使用自定义事件，但是您遇到的问题是，您的通信只会向上发送到dom树，这可能不是您要查找的内容 .

    什么是在这些情况下倾向于使用，是的，这有时可能是一种矫枉过正，是prims-event-bus .

    回复于

相关问题