Polymer 1.x：在角色 =“main”时调用铁页之间的函数并传递数据答案

【问题标题】：Polymer 1.x: call functions between iron-pages and pass data when role="main"Polymer 1.x：在角色 =“main”时调用铁页之间的函数并传递数据
【发布时间】：2017-06-16 05:12:03
【问题描述】：

我有类似的项目结构

<my-app></my-app> //in index.html

在 my-app.html 我有 Iron-page，里面有 3 个组件

<iron-pages selected="0" role="main">
  <my-page1></my-page1>
  <my-page2></my-page2>
  <my-page3></my-page3>
</iron-pages>

如何从 my-page1.html 调用 my-page2.html 中的函数和参数？

我现在使用的方法是我将在两个页面上都有一个属性notify:true 用于 my-page1.html 中的向上数据流，并在第二个组件中为该属性添加一个观察者，所以当我指定观察者会调用！

<iron-pages selected="0">
  <my-page1 data-prop1={{dataProp1}}></my-page1>
  <my-page2 data-prop2=[[dataProp1]]></my-page2>
  <my-page3></my-page3>
</iron-pages>

这里对于 data-prop2，我将添加一个观察者，因此当我在 my-page1.html 中为 data-prop1 分配数据时，观察者会在 my-page2.html 中调用

在我看来，这不是正确的方法！所以this.fire只能用于触发从子到父的功能，所以如果我需要在组件或子兄弟之间通信特定功能我应该怎么做？

【问题讨论】：

标签： polymer polymer-1.0 progressive-web-apps polymer-starter-kit

【解决方案1】：

通过数据模型进行通信是推荐的方法。（稍后让我给你拿参考。）

还建议观看 Rob 谈论单向数据流移动， https://www.youtube.com/watch?v=iJ9hS54BRag#t=11m7s

【讨论】：

【解决方案2】：

我正在做的是，使用 querySelector 来获取页面的一个实例并调用其中的方法。

如下：

var myPage2 = null;
myPage2 = document.querySeletor('my-page2');
// Now call your function from here
myPage2.yourFunction(param1, param2);

你的 my-page2 将有 yourFunction 函数。

【讨论】：