title: Vue.js - Emit event from child to parent
body: <p>I am not able to <code>$emit</code> an event from a child component to it's parent.
  I can successfully send the event, but not receive it in the parent.</p>
  
  <p><code>Results.vue</code> (<strong>Child</strong>):</p>
  
  <pre><code>&lt;a href="#" v-on:click="sendResultValues"&gt;&lt;/a&gt;
  
  // 
  
  methods: {
      sendResultValues: function () {
          this.$emit('send-result-values', 'carrier');
      }
  },
  </code></pre>
  
  <p>When I click on the <code>&lt;a&gt;</code>, I can see with Vue DevTools that an <code>$emit</code> event is fired:</p>
  
  <p><a href="https://i.stack.imgur.com/CT8GV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CT8GV.png" alt="enter image description here"></a>
  However, nothing is received in the console.log as my code below (parent):</p>
  
  <p><code>Input.vue</code> (<strong>Parent</strong>):</p>
  
  <pre><code>&lt;search-results&gt;&lt;/search-results&gt; //Results.vue component
  &lt;search-popover v-on:send-result-values="showResultData"&gt;&lt;/search-popover&gt;
   //
  methods: {
      showResultData: function () {
          console.log("Data received from child: ")
      }
   },
  </code></pre>