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

Question

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

my-app将my-component作为其内容.当用户与my-component交互时,我需要更新model.dart中的值.

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

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

这是访问应用程序模型的正确方法吗？另外如何从my-component中获取my-app？

Answer 1

我会认为让孩子成分了解其父母并不是一个特别好的模式.

但是你是对的,通常在子组件中发生的事情会改变父组件中的值,或者绑定到父组件的模型中的值.对于这样的情况,我发现孩子可以派遣一个事件,而父母可以选择在其认为合适的情况下与该事件进行交互.

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

dispatchEvent(new CustomEvent('foo'));

父母可以像这样听取这个事件:

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

实际上,孩子只是简单地广播已发生的事情,但无法控制父母如何(或者甚至是否)做出回应.如果<my-component>由其他父级使用,则该父级可以选择以不同方式响应自定义事件:

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

在父级中触发的回调可以做很多事情,包括修改模型.

希望有所帮助.