Vue component-based application structure

Component-based structure

Vue allows us to build large-scale applications composed of small, self-contained and often reusable components. Before building the application, we could abstract the application to a component tree.

One-way data flow

Data in components flows from parent down to child by props property: when the parent property updates, it will flow down to the child, but not the other way around. It means that only the component which owns the data should update the property. Instead child should emit an event to notify the parent if child has effect to its parent’s state. That meets the rule: props down, event up. Also it decouple the child component from parent.