我将 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。
这是访问应用程序模型的正确方法吗?另外如何从我的组件中获取我的应用程序?
我认为让子组件了解其父组件并不是一个特别好的模式。
但你是对的,子组件中发生的事情通常会更改父组件中或绑定到父组件的模型中的值。对于这样的情况,我发现孩子可以调度一个事件,而父母可以选择与该事件交互,因为它认为合适。
调度事件就像执行以下操作一样简单(这是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>
在父级中触发的回调几乎可以执行任何操作,包括修改模型。
希望有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)