Modularity is the key to building anything big. Vue Js is no different, Vue JS components and working with them is also similar to other languages. 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.
Creating Vue Js 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 a 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.
The Output
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.
Custom Events
We have always used events like onclick, onchange etc. But these are predefined events. Vue allows you to create custom events. For example, let’s say in a component you happen to have an error and you wanted to report this to the parent component. You could do what is called emitting. This means calling a simple function $emit(), so we would do $emit(“error”) from the template and this.$emit(“error”) from JavaScript.
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.
Conclusion
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 the child via props and child components can send data back to the 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.
Our Previous Article – Watchers And Computed Properties Vue Js
