Vue.js – Working With Components

vuejs introduction and installation

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.

Creating 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.

vue js component template

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.

vue js components layout

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.

vue js example page

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 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.

Author: Rishabh Kandari

Rishabh Kandari is a Tech Enthusiast and a Web Developer. He shares his knowledge by writing blogs on TheITStuff. He also specialises in inappropriate humour an sarcasm.