[Vuejs]-How the data should be working with components?

by

1👍

It depends on how do you want to design your application. Both approaches are fine and depend on the context.

1. Smart Component vs Non-Smart (dumb) component: If you are writing a reusable component library then you should make your components dumb and expose various Input and Output properties to the consumer component [i.e. a Smart Component]. Example –

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

The dumb component will not do any of your business decision, it should only render the UI as per its input property [@Input()] and output the result [@Output()] to the smart component. So it should follow this pattern –

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

The smart component will have the responsibility to fetch the data and feed the dumb component so that dumb component can do its functionality. Smart Component will also have its business logic and react on output data sent by the dumb components

2. All Smart Components: In this design, The data is fetched by the components itself. In this approach, the code/components will not be reusable as each component will fetch and make the business decision depends on the data fetched by the component. There is a possibility where your smart component will have the UI [i.e. a component which shows Dropdown along with the label] which you would like to use in a different part of your application with different data but you won’t be able to use it because of smart component is tightly coupled with the logic as per the data.

Conclusion – You should have a design by understanding the dumb vs smart component concept. Use Dumb component if you want to reuse the component. If you don’t have such need then the smart component is also fine but remember it makes the tight coupling between the data and UI and makes the component less reusable.

Leave a comment