A. Create a file of name suppose ChildConmponent.vue :-
ChildComponent.vue
<template>
{{data}} {{name}}
</template>
<script>
export default {
name: ‘ChildComponent’,
props: {
data: String,
name: String
}
}
</script>
ParentComponent.vue
<template>
<ChildComponent name=”Pankaj” data=”28 years” />
</template>
B. Create a file of name suppose ChildConmponent.vue and pass array as a props from ParentComponent to childComponent :-
ParentComponent.vue
<script>
export default {
name: “ParentComponent”,
data(){
return {
arr: [
{name: ‘Pankaj’, age: 28},
{name: ‘Suraj’, age: 29},
{name: ‘Rameshwar’, age: 28}
]
}
}
}
</script>
<template>
<ChildComponent v-bind:newArr = ‘arr’ />
</template>
ChildComponent.vue
<script>
export default {
name: “ChildComponent”,
props: [‘newArr’]
}
</script>
<template>
<h3 v-for=”data in newArr” :key = ‘data.name’>
{{ data.name }} {{ data.age }}
</h3>
</template>
