Transfer Data Between Components In Vue JS

How you can get or receive data between components
in Vue JS? Let’s start right now. Hello creative developer, my name is Mario,
welcome to this video. If this is your first time here and you wanna
learn more about Vue JS, start now by subscribing and clicking the
bell so you don’t miss anything. Now components are the most parts of your
application, and you’ve probably wondered how to get or receive data from one component
to the other. This is the topic in this video today and
I will explain it to you by a simple example as well as I can. 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. Now you will see this here in action. In the last video I explained how to create,
use and register components. If you have not seen the video, I link it
in the info card. I’ve opened the App.vue file with our root
component and I already created the List.vue component and imported it into the App.vue
file. Here below this is already registered in the
components property. In my data property, I have a simple array
of example records and I want to output them in the list component now. But 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 array
here. 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, I want to pick
up now 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 unsorted
list here with a list item. And this list item has a v-for loop outputting
our array. I take the index here as a key and I output
the item here. If I save now, you can see the list in the
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 iteratable 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 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 this
component, 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, I want to return 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 get
data 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 execute 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 you can trigger this event? In this example, here in the v-for loop I
want to use a click event for each element. And if I click here I want to pass to the
parent component on which item was finally clicked. Ok let me write the click event here and between
the quotes you can now trigger the event for the parent component directly or via a method. I’ll do that right here. And you can do that with $emit and this is
a function that expects a name as the first parameter. And that’s totally up to you, I’m writing
clickedItem 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 the case you should write clickedItem. And here between the quotation marks, you
can now specify any method that should execute the event now. I call this time getClickedItem. Now I create the method here. And this method now automatically gets the
value you passed in the child component as 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.

Add a Comment

Your email address will not be published. Required fields are marked *