Question

我正在研究Angular和Vue项目。

我很受伤，应该如何处理组件数据？说我有一个页面（是一个组件），其中有两个子组件显示一些数据。

例如：

 <div id="page-1">
   <user-list></user-list>
   <product-list></products-list>
 </div>

谁应该获取数据？页面组件并传递给子代？还是每个组件都应该获取自己的数据？最佳做法是什么？

Answer 1

这取决于您要如何设计应用程序。两种方法都很好，并且取决于上下文。

1。智能组件与非智能（哑）组件：如果要编写可重用的组件库，则应使组件哑，并向使用者组件公开各种Input和Output属性[即智能组件]。示例-

<smart-component>
 <re-usable-dumb-component [inputProp1]="property1OnSmartComponent"
                           [inputProp2]="property2OnSmartComponent"
                           (outputProperty1FromDumbComponent)="property1HandlerInSmartComponent($event)">
 </re-usable-dumb-component>
</smart-component>

哑组件将不会做出任何业务决定，它仅应根据其输入属性[@Input()]来呈现UI，并将结果[@Output()]输出到智能组件。所以应该遵循这种模式-

Input Props to Dumb Components -> Dumb Components Render UI -> Emit the result [via output properties] -> Result is handled by SMart Component

智能组件将负责获取数据并提供哑组件，以便哑组件可以发挥其功能。 Smart Component也将具有其业务逻辑，并对愚蠢的组件发送的输出数据做出反应

2。所有智能组件：在这种设计中，数据由组件本身获取。在这种方法中，代码/组件将不可重用，因为每个组件都将获取并根据组件所获取的数据做出业务决策。您的智能组件可能会具有用户界面[即您希望在应用程序的不同部分中使用不同数据的同时显示Dropdown和标签的组件]，但由于智能组件与数据的逻辑紧密结合，您将无法使用它

结论-您应该通过理解哑巴与智能组件的概念来进行设计。如果要重用该组件，请使用Dumb组件。如果您没有这种需求，那么智能组件也可以，但是请记住，它使数据和UI之间紧密耦合，并使组件的可重用性降低。

数据应如何与组件一起使用？

1 个答案: