Modularity is the key to building anything big. Any big application is the result of small modules, these modules are made up of smaller submodules. These sub-modules are often called components. They are the building blocks of any big application. Vue.js does not have a separate code for building components. Every .vue file is a vue component. Let us have a look at how we can work with components.
Let us very quickly scaffold a small component. Remember the components folder in our project, create a new file called greeting.vue. This will be our component file. Simply re-create the code from the image below.
Nothing special here, you already know everything that we have written here. The only thing new here is the props element. Props are basically like parameters. Just like you pass parameters to functions, you pass props to templates. We have used a prop called name. Also, we are using a local variable that maintains a count, incremented by button.
Using or Importing Components
Components that have been created can be used in pages or other components. We will use the greeting component that we just created in a page on our site. To do this we can simply use the following code.
You already know most of the things here, so let us talk about what’s new.
The greeting component has been imported and added into the components property.
The greeting component has been used three times in the HTML template.
The name prop has been passed to greeting component.
If you followed everything as above, you should be able to achieve the following output.
You know we imported the component thrice. I wanted to demonstrate that these components are separated instances of the same code and have no connection between each other. You can see that our main component has a data property called name that has been passed as a prop to all three of them. This prop is common for all, so it changes all of them. However, the count for each prop increments only locally for each instance of the component.
Catching custom events
Catching custom events is nothing different from catching normal events. You can simply do something like this.
<greeting @click=some_function @error=another_function />
Needless to say, some_function and another_function are methods defined in the parent component.
Components play a crucial role when building bigger applications. They help break down modules into smaller chunks of code that are easier to maintain. Parent components can send data to child via props and child components can send data back to parent via custom events. I am sure you have a basic idea of components and why we use them. If you have any questions regarding the topic, drop them in the comments section below.