Complete Vue.js 3 Guide [7/10]

Until now, we have only been working with one component: the root component. In this lesson, we will show you how to create and use child components.

Open the APP instance object, you will find a method named component. This method is what we use to declare global components. Global components are visible in the root component and other child components.

The component method takes two arguments. The first one will be used to name the child component tag.

The second one is an options object. This object is the same as the one passed to the createApp method.

We can set a name for the child component using the name option. The name option is optional but we recommend you keep it. In later lessons, we will show you what it can do for us.

Next, we add the data option. Its value is a function that returns an object. Data properties are defined inside the returned object.