To pass data from parent to child components, we use props in Vue. But as the application gets complex we may end up having deeply nested components. This means, passing props in every component in the nested chain till the end component gets the data. In Vue, we can use the provide and inject feature, which can help us avoid using the props to pass data when dealing with deeply nested components....
The data flow in Vue is unidirectional. What this means is data flows from parent to child components using props. In case, we want to pass information from the child to the parent component we make use of the $emit method. $emit is a method in Vue used for passing information from child to the parent component. The way it works is $emit method is used to call a custom event from the child component which gets handled by the parent component....
To pass dynamic props in Vue we make use of v-bind. If the props are not bind using v-bind, it treats the values as static values i.e, it interprets it as strings. For example, <MyComponent subscribed="333" /> Here, subscribed is passed as static value. If you want Vue to treat it as a Javascript expression, use v-bind. <MyComponent v-bind:subscribed="333" /> or using shorthand: <MyComponent :subscribed="333" /> Let’s look at dynamic props in more details by creating a Vue CLI application....
We can validate props in Vue by declaring them as an object rather than an array. In this object, we can specify our requirements like the type of value it should hold or the default value it should have, and so on. For example, export default { props: { firstName: { type: String, required: true, }, lastName: String, }, }; In this case, we have firstName property which should be of type string and it is compulsory to declare it....
To pass data from the parent component to the child component, Vue makes use of something called props. Props are custom attributes that can be declared on a component that enables one component to pass data to another. For example, <employee-list name="Bob" department="Accounting"></employee-list> Here, we have a employee-list component to which we are passing two props name with the value “Bob” and department property with the value “Accounting”. Let’s look at props in more detail and how it is used to pass data from parent to child components....
Components are individual blocks that contain UI logic that can be reused in a Vue application. They make it easy to organize and maintain code while building large and complex applications. In this article, we will look at how to declare and use Vue components with examples. Declaring Vue Component Let us begin by creating a new application using the Vue CLI. vue create my-component Once, the installation is complete, we can navigate to the folder and run the server to load the application....
In this article, we will look at how to make use of Vue CLI to create and run Vue.js applications. Installation To install Vue CLI, I will be using npm to install the package globally using the below command on my terminal. npm install -g @vue/cli Once the installation is successful, we will create our first Vue CLI application using the following command. vue create first-project Here, first-project is the name of the project....
v-once is a directive in Vue.js used when you want to render a value only once. Even if the value of the property changes in the future, the value under v-once does not change once the initial render is complete. Let’s look at an example to understand it better. To demonstrate the usage of v-once we will create a counter app that will increase the count by 1 every time a button is clicked....
One of the common tasks when working with HTML form is to stop it from reloading when customers clicks the submit button. In this article, we will look at how to prevent this default behaviour of HTML forms in Vue. We will start by creating a simple HTML form. <form> <div> <label for="name">Name: </label> <input id="name" type="text" /> <input id="submit" type="submit" /> </div> </form> When we click on the submit button, the page reloads....
The event object is automatically passed to the method which handles the event. Let’s look at an example to see it in action. <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <title>Vue.Js</title> </head> <body> <div id="app"> <div>Click to change button changeColor</div> <button @click="changeColor">Click Here!</button> </div> </body> <script> const { createApp } = Vue; createApp({ methods: { changeColor(e) { console.log(e); // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, …} }, }, })....