Polymer 1.x：调用iron-pages之间的函数并在role =“main”时传递数据

Posted 2021-04-12

我有项目结构

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

在my-app.html我有铁页，里面我有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中的参数？

我现在使用的方法是，我将在my-page1.html中为notify:true页面提供向上数据流的属性，并在第二个组件中为该属性添加一个观察者，所以当我分配观察者时呼叫！

<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只能用于触发从子节点到父节点的功能，所以如果我需要在组件或子节点兄弟之间传达特定的功能，我该怎么办？

答案

建议通过数据模型进行通信。 （稍后我会带你参考。）

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

另一答案

我正在做的是，使用querySelector获取页面的实例并调用该方法。

如下：

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

`

你的my-page2将具有yourFunction功能。