3 Working with Blazor’s component model

The fundamental building blocks of Blazor applications are components, almost everything you do will directly or indirectly work with them. In order to build great applications, you must know how to harness their power. You’ve already had a taste of using them in chapter 2, in this chapter we’re going to look at them in much more detail.

Components define a piece of UI, that can be something as small as a button or as large as an entire page, components can also contain other components. They encapsulate any data that that piece of UI requires to function. They allow a piece of UI to be reused across an application or even shared across multiple applications, something we’ll be look at in chapter 6 – Designing reusable components.

Data can be passed into a component using parameters. Parameters define the public API of a component. The syntax for passing data into a component using parameters is like defining attributes on a standard HTML element, with a key/value pair. The key being the parameter name and the value being the data you wish to pass to the component.

The data a component holds is more commonly referred to as its state. Methods on a component define its logic. These methods manipulate and control that state via the handling of events.

3.1   Structuring Components

3.1.1   Single file

3.1.2   Partial class

3.2   Component lifecycle methods

3.2.1   The first render

3.2.2   The lifecycle with async

3.2.3   Dispose – The extra lifecycle method

3.3   Communicating between parent and child components

3.3.1   Passing values from a parent to a child

3.3.2   Passing data from a child to a parent

3.4   Styling components

3.4.1   Global styling

3.4.2   Scoped styling

3.4.3   Using CSS preprocessors

3.5   Summary