I've been working with Vue.js 2.0 and I'm facing an issue trying to emit an event from a child component to the parent component, but unfortunately, it's not functioning as expected.
Here is a glimpse of my code:
child component:
<template>
<button @click="confirmSendMessage">Send</button>
</template>
<script>
export default {
methods: {
confirmSendMessage () {
this.$emit('confirmed')
}
}
</script>
parent component:
<template>
<ConfirmMessage/>
</template>
<script>
import ConfirmMessage from './ConfirmMessage'
export default {
events: {
confirmed() {
console.log('confirmed')
}
},
components: {
ConfirmMessage
}
}
</script>
Upon clicking the button, no message appears in the Chrome console for me. I am perplexed by this situation and would greatly appreciate any assistance or guidance. As a beginner in Vue JS, I am seeking help to resolve this dilemma.