CODEWITHSUNDEEP
javascriptvue.jsemit
Leonardo Santos
Leonardo Santos

Reputation: 300

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

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.

Upvotes: 4

Views: 8469

Answers (2)

DobleL
DobleL

Reputation: 3928

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

Upvotes: 3

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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

Upvotes: 7

Related Questions