Vue.js - Emit event from child to parent

0
votes

I am not able to $emit an event from a child component to it's parent. I can successfully send the event, but not receive it in the parent.

Results.vue (Child):

<a href="#" v-on:click="sendResultValues"></a>

// 

methods: {
    sendResultValues: function () {
        this.$emit('send-result-values', 'carrier');
    }
},

When I click on the <a>, I can see with Vue DevTools that an $emit event is fired:

enter image description here However, nothing is received in the console.log as my code below (parent):

Input.vue (Parent):

<search-results></search-results> //Results.vue component
<search-popover v-on:send-result-values="showResultData"></search-popover>
 //
methods: {
    showResultData: function () {
        console.log("Data received from child: ")
    }
 },
2
javascriptvue.jsvuejs2
Is results.vue the component for search-popover or is results.vue part of search-popover? – Hammerbot
In my Input.vue (Parent) file I have these two components: <search-results></search-results> and <search-popover></search-popover> – oliverbj
dunno, seems to work. codesandbox.io/s/0pwz408prp Edit the sandbox so it's more similar to your actual vue – A. L
Well, you need to listen on the event on the <search-results></search-results>, not on the <search-popover></search-popover> – Hammerbot
You're setting the handler on search-popover but the one who emits the event is search-result as seen in the image – Javi Mollá

2 Answers

4
votes

You need to listen to the event on the search-results component, not on the search-popover.

Input.vue (Parent):

<search-results v-on:send-result-values="showResultData"></search-results>
<search-popover></search-popover>

methods: {
    showResultData: function () {
        console.log("Data received from child: ")
    }
 },
-1
votes

there is way more way to solve this problem.

  1. You can use vuex.js
  2. you can use $emit and $on methods

for example

vm.$emit('test', 'hi'); 
vm.$on('test', function (msg) { console.log(msg) }); // => "hi"