Question

我有一个嵌套组件，在这种情况下，使用DOM或组件树的聚合方式是什么。

<parent-component>
  <some-component>
    <component-i-am-starting-from></<component-i-am-starting-from>
  </some-component>
 <some-other-component>
 </some-other-component>
</parent-component>

我想要深入嵌套组件并引用任何父组件及其模型，或在其中一个组件中触发事件。如果我可以访问兄弟组件等，可以获得奖励

很容易

this.$.idOfChildComponent.event()

我已经尝试过dispatchEvent，domHost，shadowRoot，似乎无法在组件树上获得任何进一步的直接父级或者得到一个错误，那就是未定义的东西，不是函数等等。

是否有像React这样的方式将引用传递为属性。这些文档似乎没有帮助，也没有在互联网上搜索。

谢谢！

更新

所以我不确定这是否是正确的方法，但它可以从子函数调用父函数。

<parent-component id="parentComponent">
  <some-component>
    <component-i-am-starting-from></<component-i-am-starting-from>
  </some-component>
 <some-other-component>
 </some-other-component>
</parent-component>

componentIAmStartingFromFunc(){
 document.getElementById('parentElement').parentElementFunc()
}

但似乎对兄弟姐妹不起作用？

**更新** 我基本上做同样的事情，通过调用其中一个子节点的父节点来调用兄弟事件，然后向兄弟节点发送一个触发器，这也是一个子组件。

Answer 1

从孩子那里调用父功能;

child-component.html（聚合物2.x）

this.dispatchEvent(new CustomEvent('upway-func', {detail: {op:"Optionally I can send some data"}}));

child-component.html（聚合物1.x）

 this.fire('upway-func', {detail: {op:"Optionally I can send some data"}});

<强>父 - component.html

...
<child-component on-upway-func='_someFunction'></child-component>

...
_someFunction(d){
  console.log(d.detail.op); // "Optionally I can send some data"
 }

此处this link了解更多详情

Answer 2

您是否尝试过使用template<Type Case> struct PrinterHelper { void print_g(const std::string& s) { std::cout << "just s: " << s << std::endl; } }; template<> struct PrinterHelper<Type::lowercase> { void print_g(const std::string& s) { std::cout << "lowercase " << std::nouppercase << s << std::endl; } }; template<> struct PrinterHelper<Type::uppercase> { void print_g(const std::string& s) { std::cout << "uppercase " << std::uppercase << s << std::endl; } }; template<class Case> using Printer = PrinterHelper<Case::cp>;？

问问自己：如果我是this.parentElement中的span，我将如何到达div？

如果您想通过选择器在祖先链中找到特定元素，可以在好的浏览器中使用div或https://github.com/jonathantneal/closest

另一个答案中提到的消息系统可以起作用，但对于我认为你的问题需要的位置关系遍历并没有帮助。在某些情况下，传递id和/或对象可以与消息一起使用。

Polymer 2.0从子组件访问父组件

2 个答案: