Props, States, and Events in VueJS Explained with Code Examples
I recently learned Vue 2 during my internship period and thought to share my learning and knowledge on some very basic concepts of Vue. I am sure that most of you will be clear about these concepts after reading this article.
Enough introduction, let’s get started!
What is VueJS?
Vue.js is a flexible, lightweight, and easy-to-use JavaScript-based framework. It offers advanced and brilliant web tools to build front-end web applications. Besides, Vue is considered a progressive and versatile JavaScript framework.
This is because it enables reactivity in an app code without affecting any core feature built. This, in turn, creates the opportunity to build a progressive UI.
Vue gives developers the scope of expanding web functionalities using personalized modules and visual components.
Now that you’re familiar with what Vue is, we should now move to Props.
Note: Here all the code examples are in Vue 2.
Props
Before deep diving into props, let us understand what are components in Vue and why we need them. Usually, the websites are divided into small components which divide the entire UI into small pieces rather than building the entire UI in a single file.
When using such components we may require passing down data from parent to child components. One such way of doing it is using props.
Props is a keyword that stands for Properties. They enable us to pass data and functionality from parent to child components. One interesting thing to note is it’s a one-way route. We can not pass data from child to parent component using props (for that we can use emit in Vue).
Declaring Props in Vue
To register props, we have to add them to the props array inside the script tag.
In the above code, we registered a prop called name which can be later used in our app’s template.
Note: This is done in the Child component, where data is received from parents.
Passing Data to Components via Props
The above code shows how to pass data from the Parent to Child component. We can pass static values like “Mark” or use v-bind like “StudentName”.
To pass multiple data, we can just push more props to the props array in the child component. Something like this :
props : [‘name’, ‘age’, ‘gender’];Prop Types
We can pass any data type as props such as String, Numbers, Boolean, Array, Object, etc. If the type of data passed differs from the prop type, Vue sends an alert to the console with a warning.
For specifying the type of prop, we use an object instead of an array where name and type are stated in a key-value pair.
Validating Props and Default Prop Values
To validate props, we can add the required key and its value to the prop. Also, we can set default values to our props which are rendered if data is not received from the parent component.
To better understand it, let’s look into an example.
States
Before moving on to States, let us understand how data() works in Vue.js:
Each component has the data function methods as part of the declaration.
Data — is a function that returns the initial reactive state for the component instance. The function is expected to return a plain JavaScript object, which will be made reactive by Vue.
In simple words, everything inside data() will be reactive.
Why does data have to be declared in a component?
Each component has some data to show in the browser, so the data function code returns the data. This will be accessed by Component methods globally.
Essential points about data function in Vue js
- It can be arrow functions or data property or normal es5 function
- It should always return an object
- Object properties are available, and can be accessed using component instance
- Methods can be called inside data function
- the returned object contains properties, keys as well as function calls
State creation in Vue
We use the data option in Vue.js as a function that returns an object of states which are made reactive by Vue for a particular instance of a component.
Let’s look into an example for better understanding:
In the example shown above, there is a state “count” which is initialized as 1.
Reactivity means, that when a state changes, these changes are automatically reflected in the DOM and on other instances of that state.
We can access these states inside the script using “this”.
For Example :
When we have states shared by different components, it becomes very difficult to manage them using props and custom events. To make state management easy and manageable we can use libraries such as VueX and Pinia.
Events
When building a dynamic website, you need to listen to different types of events. To drive these types of interactions on our website or web application, we can use event handling.
Vue allows us to handle the events triggered by users, it helps in adding interactivity to web apps to provide a rich UX to the end user.
All the events we use in JavaScript can be used in Vue.
The v-on directive is used to listen to DOM events. An alternative can be using @ symbol.
v-on:click=”clickHandler” or @click=”clickHandler”We can write inline JavaScript straight into our events, like @click=”counter++” or call a method as shown below:
We can use various events such as @keydown, @mousedown, @scroll, etc. Mouse events can be further extended like @mousedown.left or @mousedown.right to track only specific clicks.
Event Modifiers
To prevent an event’s default behavior, we can call the .prevent modifier in Vue, which calls the native event.preventDefault() method. Although these can be done inside methods, v=Vue gives us the flexibility to do it beforehand.
Examples: @click.stop, @submit.prevent, @click.once
Key Modifiers
When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for the v-on directive when listening for key events.
For example @keydown.enter = “handler” which calls handler only when the ‘Enter’ key is pressed.
Creating Custom Events
We use $emit in Vue to pass an event or data from the child component to the parent component.
For example, we can create an event “someEvent” when the button is clicked in the child component. Now the parent is listening to “someEvent” like any other native event to call the handler.
That’s all about Vue props, states, and events. If this article had helped you in some way then don’t forget to share it. I will keep on sharing about different Vue.js concepts in simple language so you can comment about what subject I should explain next.
See you in the next article!
