title: VueJS: Run function in parent component when event triggered in child component
body: <p>This is my first proper Vue JS project...I've searched Stack O and can't find anything that specifically addresses my issue, but I apologise if this has already been asked.</p>
  
  <p><strong>The Problem</strong></p>
  
  <p>I have two components, the parent is the page layout, while the child is a module of that page. When somebody clicks on a button in the child component, I want to trigger a function in the parent component.</p>
  
  <p>The $emit part of the process is firing correctly according to the VueJS Dev Tools, but the function in the parent doesn't trigger.</p>
  
  <p>Where am I going wrong?</p>
  
  <p>Here is my abberviated code (I've removed anything not related to the issue)...</p>
  
  <p><strong>Parent Component</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;div :toggle-nav="showHideNav" :class="navState"&gt;
          &lt;div class="wrapper"&gt;
              &lt;layout-toolbar&gt;&lt;/layout-toolbar&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import layoutToolbar from '~/components/layout/toolbar.vue'
  
      export default {
          components: {
              layoutToolbar,
          },
          data: function() {
              return {
                  navState: 'menu-closed'
              }
          },
          methods: {
              showHideNav: function(event) {
                  if (this.navState == 'menu-closed') {
                      this.navState = 'menu-open'
                  } else {
                      this.navState = 'menu-closed'
                  }
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Child Component</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;div class="toolbar" role="navigation"&gt;
          &lt;div class="tools" role="group"&gt;
              &lt;button 
                  class="button-icon" 
                  aria-label="Open Navigation" 
                  @click="$emit('toggle-nav')"&gt;
                      &lt;i aria-hidden="true" class="far fa-bars" title="Open Navigation"&gt;&lt;/i&gt;
                      &lt;span class="sr-only"&gt;Open Navigation&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Do I need to be making use of <em>props</em>?</p>
  
  <p>Appreciate any help that can be offered.</p>