Polymer2: how to share data from parent to deeply nested component?

Question

I am wondering what would be the best idea in case of passing data from parent component to deeply nested component while is use Polymer2.

For example,

    <a some-prop="1">
      <b>
        <c>
          <d>
            <e></e>
          </d>
        </c>
      </b>
    </a>

I'd like to pass some-prop from a to e.

To solve this issue, I have a couple of ideas:

Singleton service: Such as AngularJs or Angular2.x. But Polymer doesn't provide singleton service by default.
Flux pattern: Like Redux, Vuex. But my app is not complex enough to use this pattern. Plus has to implement this pattern by using Polymer.
e does NOT use some-prop and just fire an event from e and a will handle whatever I want: By doing this, there won't be need passing some-prop.

What would be the best way to handle this situation?

How Polymer is designed to share data between components?

Thanks.

One way data-binding is the way to go. Binding data to the child elements down to your component "e" and sending events up when data is changed — Niklas
– Niklas, Commented Dec 19, 2019 at 10:23

Cappittall · Accepted Answer · 2019-12-21 12:31:47Z

2

You can pass the data between elements or child elements very easy: Here an example:

Demo:

  <dom-module id="x-foo">
    <template>
         <a-a some-prop="{{someProp}}">
          <b-b>
            <c-c>
              <d-d>
                <e-e some-prop={{someProp}}>
                </e-e>
              </d-d>
            </c-c>
          </b-b>
        </a-a>
    </template>
  </dom-module>

Remember: custom elements should be named with min two char with dash-separated.

answered Dec 21, 2019 at 12:31

Cappittall

3,4513 gold badges19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Polymer2: how to share data from parent to deeply nested component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related