Introduction
Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In the previous parts, I created some simple components. However, there is much more to them than what I used so far. And one of the basic requirements is passing data. In this post, I will be covering how to do that.
Initial component
First, I will start with the simplest possible component. A greeting component displaying just the text “Hello, John”.
<template>
<div>Hello, John</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: { }
}
</script>Passing data to the component
The problem with this component is that it always displays the same name, John. Usually, you would want to change the name so it could be reused in different situations. And we could do that by passing that information to the component. We do this by using props. Since we are using components as if they are HTML elements, passing props is done as if they are attributes.
<Greeting name="John" />In the code above, the name is hardcoded. In a real-world example, you would probably have such a thing somewhere in your script…
