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

admin管理员组

文章数量:1345891

I am using Vue.js 2.0 and I am trying to emit an event from child ponent to parent ponent but it's not working.

You can see my code below:

child ponent:

<template>
  <button @click="confirmSendMessage">Send</button>
</template>

<script>
  export default {
    methods: {
      confirmSendMessage () {
        this.$emit('confirmed')
      }
    }
</script>

parent ponent:

<template>
    <ConfirmMessage/>
</template>

<script>
    import ConfirmMessage from './ConfirmMessage'
    export default {
        events: {
           confirmed() {
              console.log('confirmed')
           }
        },
        ponents: {
            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.

I am using Vue.js 2.0 and I am trying to emit an event from child ponent to parent ponent but it's not working.

You can see my code below:

child ponent:

<template>
  <button @click="confirmSendMessage">Send</button>
</template>

<script>
  export default {
    methods: {
      confirmSendMessage () {
        this.$emit('confirmed')
      }
    }
</script>

parent ponent:

<template>
    <ConfirmMessage/>
</template>

<script>
    import ConfirmMessage from './ConfirmMessage'
    export default {
        events: {
           confirmed() {
              console.log('confirmed')
           }
        },
        ponents: {
            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.

• javascript
• vue.js
• emit

Share Improve this question Follow edited Feb 18, 2019 at 8:53 Pierce O'Neill 3831010 silver badges2424 bronze badges asked Mar 20, 2018 at 15:12 Leonardo SantosLeonardo Santos 30077 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 -->

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

本文标签： javascriptI am using Vuejs 20 and I am trying to emit an event from child componentStack Overflow