When you are trying to send data between components in Vue you need to know about props and emits. Which one is for what and how do they work? Well its pretty simple let me explain.
Props are used to send data from a parent to a child. Lets say you have an array of all of your songs called songs that you need to pass down to a child component so they can render them all. To do this you simple bind the name of your prop and assign it the songs array.
e.g-
<child-component :songs="songs"></child-component>
Now within your child-component you create a props section and tell Vue you are receiving the songs array from your parent. Like this-
props: ["songs"],
Now the array is accessible to the child component and you are able to render all of your songs.
Now emits. Emits are used to do the opposite of props. They are used for sending data from the child to the parent.
Lets say that we have a variable called name and we want to send it up to the parent. To do this you:
methods:{
sendName(name){
this.$emit('name');
}
}
Now within the parent component, we need to listen to this emit by doing this:
<child-component @name="name"></child-component>
name(name){
console.log(name);
}
Every time we emit the name variable to the parent, it will launch the name function in the parent and you can do anything you want with the variable. These are the basics of props and emit hope it helped you understand them as they can be confusing at the beginning.