Polymer2：如何将数据从父组件共享到深层嵌套组件？答案

【问题标题】：Polymer2: how to share data from parent to deeply nested component?Polymer2：如何将数据从父组件共享到深层嵌套组件？
【发布时间】：2019-12-18 17:10:07
【问题描述】：

我想知道在使用 Polymer2 时将数据从父组件传递到深层嵌套组件的最佳主意是什么。

例如，

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

我想将some-prop 从a 传递到e。

为了解决这个问题，我有几个想法：

单例服务：如 AngularJs 或 Angular2.x。但是 Polymer 默认不提供单例服务。
Flux 模式：像 Redux、Vuex。但是我的应用程序不够复杂，无法使用这种模式。 Plus 必须使用 Polymer 来实现这种模式。
e 不使用some-prop，而只是从e 触发一个事件，a 将处理我想要的任何事情：通过这样做，将不需要传递some-prop。

处理这种情况的最佳方法是什么？

如何设计 Polymer 在组件之间共享数据？

谢谢。

【问题讨论】：

一种方法是数据绑定。将数据绑定到子元素到组件“e”，并在数据更改时向上发送事件

标签： polymer singleton web-component flux polymer-2.x

【解决方案1】：

你可以很容易地在元素或子元素之间传递数据：这里是一个例子：

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>

请记住：自定义元素应以最少两个字符命名，并以破折号分隔。

【讨论】：