I am using Vue.js 2.0 and I am trying to emit an event from `child component`

Question

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.

score 7 · Accepted Answer · edited Jul 15 '22 at 20:38

7

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 -->

edited Jul 15 '22 at 20:38

tony19

125,647
18
229
307

answered Mar 20 '18 at 15:14

Bhojendra Rauniyar

83,432
35
168
231

Now I got this on console: `Property or method "confirmed" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.` :S – Leonardo Santos Mar 20 '18 at 15:18

score 3 · Answer 2 · edited Jul 15 '22 at 21:52

3

You have to listen the events, if you look the Emit Documentation, it expects as first argument the name of the event as string, an then the values (if you have) you want to pass to the listener.

so it will be:

<confirm-message :nameOfEvent="functionToExecuteWhenTheEventIsEmitted" />

the method will be:

functionToExecuteWhenTeEventIsEmitted(someValue) { //do whatever with someValue}

and on the child:

this.$emit('nameOfEvent', someValue)

In your case

You aren't passing values so this.$emit('confirmed') and <ConfirmMessage :confirmed="confirmed"> it will be enought

edited Jul 15 '22 at 21:52

tony19

125,647
18
229
307

answered Mar 20 '18 at 15:21

DobleL

3,808
14
20

passing the value is not necessary. – Bhojendra Rauniyar Mar 20 '18 at 15:24
it was a full example, you can avoid it, then just use the name of the event – DobleL Mar 20 '18 at 15:26
As of Vue 2, you should use kebab-case for the events name, otherwise it won't work, as explained in the [docs](https://br.vuejs.org/v2/guide/components-custom-events.html) – Andre Ravazzi May 09 '19 at 17:58

I am using Vue.js 2.0 and I am trying to emit an event from `child component`

2 Answers2

Linked