Props are an important feature in Vue for managing parent and child components, but handling them can be somewhat tricky. In this article, we’ll learn how to pass data from a parent component to child components by using props in Vue 3. We can pass array data as a props by using this way :-
ParantComponent.vue
<template>
<ChildComponent v-bind:newArr = 'Arr' />
</template>
<script>
import ChildComponent from './ChildComponent';
export default {
name : 'ParentComponent',
components : {
ChildComponent
},
data() {
return {
Arr : [
{ name : 'Ena', age : 26 },
{ name : 'Meena', age : 36 },
{ name : 'Teena', age : 27 },
]
}
}
}
</script>
ChildComponent.vue
<template>
<h1 v-for="users in newArr" :key="users.name">Name of user is {{users.name}} and age is {{users.age}} </h1>
</template>
<script>
export default {
name : "ChildComponent",
props : ['newArr']
}
</script>
