3👍
✅
Your child component may look like this:
<template>
<div class="child">
<button @click="buttonClick">Button</button>
</div>
</template>
<script>
export default {
props: ['buttonId'],
methods:{
buttonClick() {
this.$emit('buttonClick', this.buttonId)
}
}
}
</script>
And your parent component:
<template>
<div class="parent">
<child v-for="i in 5" :buttonId="i"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child,
},
methods: {
onButtonClick(buttonId) {
console.log('Got a click event from button ', buttonId)
}
},
mounted() {
this.$children.forEach(child => {
child.buttonClick()
})
}
}
</script>
Source:stackexchange.com