dart - 如何从聚合物组件访问父模型

Question

我将 my-app 作为 index.html 文件中的主要应用程序组件，并使用 model.dart 作为其模型，即我的应用程序模型。

my-app 以 my-component 作为其内容。当用户与我的组件交互时，我需要更新 model.dart 中的值。

<my-app>
   <my-component></my-component>
</my-app>

我认为的一种方法是访问 my-component dart 文件中的 my-app 并使用其模型属性访问 model.dart。

这是访问应用程序模型的正确方法吗？另外如何从我的组件中获取我的应用程序？

Answer 1

我认为让子组件了解其父组件并不是一个特别好的模式。

但你是对的，子组件中发生的事情通常会改变父组件中的值，或者绑定(bind)到父组件的模型中的值。对于这样的情况，我发现 child 可以调度一个事件，而 parent 可以选择与该事件进行交互，因为它认为合适。

调度事件就像执行以下操作一样简单(这是 class MyComponent ):

dispatchEvent(new CustomEvent('foo'));

parent 可以像这样监听那个事件:

<my-app>
  <my-component on-foo="{{someMethodOnTheParent}}"></my-component>
</my-app>

实际上， child 只是简单地广播某事已经发生，但无法控制 parent 如何(或什至)如何回应。如果 <my-component>由不同的父级使用，该父级可以选择以不同的方式响应自定义事件:

<another-element>
  <my-component on-foo="{{someOtherMethod}}"></my-component>
</another-element>

在 parent 中触发的回调几乎可以做任何事情，包括修改模型。

希望有帮助。