I am using Vue.js 2.0 and I am trying to emit an event from child component
to parent component
but it's not working.
You can see my code below:
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>
When I click on the button, nothing appears to me on the Chrome console. I don't know why. Can anybody help me? I am new on Vue JS.
You missed to listen the emitted event. Use v-on to listen to the event:
<!-- vv -> call method -->
<ConfirmMessage v-on:confirmed="confirmed" />
<!-- ^^ -> emitted event -->