How can you transfer data between components in Vue JS? We, as a Best JavaScript Development Company,are explaining it in detail in this blog. Components are the most part of your application, and you’ve probably wondered how to get or receive data from one component to the other and we are able to prove an explanation for it to you with the help of an easy example.
Transfer Data Between Two Components
Imagine you have 2 components. The first is the App component and the other is a List component to display a simple list. Now, when you create a component and use it in another component, these two components interact with each other. A component that render another component in its template, is the parent component.
And the component used in another is the child component. And these two components can now get or receive data directly. Let’s open the App.vue file with the root component and create the List.vue component and import it into the App.vuefile. Here below this is already registered in the components property. In my data property, there is a simple array of example records and I want to output them in the list component now.
How do you get this array into the list component?
Now as first you can use this component directly here as selector in the template. And now you have the option to specify attributes directly in the selector of the component and bind them, you can choose the name you want, I write listdata, and now the data you want to pass to the component, so the arrayhere. With this, you can transfer data from the parent component to the child component. But that’s only the first part. You also have to pick up the data in the child component.
Here in the List.vue file, we need to pick up the data we get from our root component. Vue provides a property called props. And this property is an array, for easy usage,more in a second. And here in this array we can now write all the attributes we want to pick up in this case listdata. And more is not necessary at this point. Now you can use it like a normal data attribute in your template and in any method and so on. Let’s do that quickly by creating an un sortedlist here with a list item. And this list item has a v-for loop outputtingour array. Now take the index here as a key and output the item here.
If you save now, you can see the list in your browser. Ok, that works very well. There is a small problem here. It is not sure if the given data is an array or at least an iterable value. It’s recommended here when picking up the values also to specify the data type which one expects and whether the given attribute is a required attribute. For this we can not use an array, but should use an object. And with our attribute here, the quotes now have to go away because it’s now an object property. As a value we can now specify the data type we want. In this case an array. It is also possible to specify several data types in an array here. For example, you could also specify an object here. But I think an array as a data type should be enough for this example.
If an attribute is really essential to thiscomponent, then you can also include that here by making an Object from the Value as well. You can now specify the data type as type. And now you can set ‘require’ equal to true. You can also validate the value, you can do this with the attribute validator, which of course is a function. Between the parentheses you get the value automatically passed and you can now validate them in the function. As a simple example, result will be true if the array length does not exceed 5 items.
If the validation fails or the data type is not correct, Vue will issue a warning in the browser console when you are in development mode. This is, of course, very helpful when you work in a team and develop a component that is used by others and you want to make sure that the data here matches a certain pattern. Ok that was just one way, so how do you getdata from the parent component into the child component.
And now it’s about the other way back. And it works a little differently. You can not pass any data directly to the parent component here, instead you have to trigger an event that executes a function in the parent component in the end.
And this event you can now give data or not, depending on whether this is necessary in the specific case or not. Now how can you trigger this event? In this example, here in the v-for loop I want to use a click event for each element and want to pass to the parent component on which item was finally clicked. Now write click events here and between the quotes you can now trigger the event for the parent component directly or via a method. And you can do that with $admitt and this is a function that expects a name as the first parameter. And that’s totally up to you, I’m writingclickedItem here. And as a second parameter, you can now pass the data. In this case, the value. And that’s it.
Let’s go to the other one, the app component. Now here we have to intercept the triggered event in the child component. You can now do this directly at the selector of the component. And catch it now with @ and now it is very important that you write here the exact name that you have specified here in the child component. If this is not correct, the event can not be triggered here.
So in this case you should write clickedItem. And here between the quotation marks, you can now specify any method that should execute the event now. Call this time getClickedItem and create the method here.
And this method now automatically gets the value you passed in the child component as a second parameter here in the emit function. You can write any name here. I just use value. And so you can take data from the child component. In my function here I pass the value to a local attribute this.clickedItem. And create it in my local data attribute. And output it here in the template.
I’ll save and if I click on any item the value appears. This is a very simple example, but this is basically how you can get or receive data between 2 components. Have fun with Vue JS.
So now you can understand it easily about How Can You Transfer Data Between Components In Vue JS.