title: Listen to events from parent component in child and execute child’s method in vue without hub
body: <p>There seems to be a lot of discussion around this topic such as <a href="https://stackoverflow.com/questions/40855427/executing-child-method-from-parent-component-in-vue-js">Stackoverflow answer using hub</a>, <a href="https://stackoverflow.com/questions/40855427/executing-child-method-from-parent-component-in-vue-js">Stackoverflow answer using refs</a>, so I really like to ask experts to provide for once a clear concise answer to this question. If the answer is also just not possible please state that!</p>
  <p>Here is the scenario:
  There are two components, a parent and a child</p>
  <pre><code>&lt;Parent&gt; // There is a button here that can be clicked to emit an event using 'this.$emit()'
     &lt;Child&gt;&lt;/Child&gt; // The child listens and once hears the event, it does something
  &lt;/Parent&gt;
  </code></pre>
  <h2>What to be achieved?</h2>
  <p>Clicking the button in the Parent emits a certain event, the child will be constantly listening and once it hears the event it executes an action, such as calling a method of its own.</p>
  <h2>What is out there about this so far?</h2>
  <ol>
  <li><p>Using a hub, in <a href="https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication" rel="nofollow noreferrer">Vue Hub</a> it is clearly stated this is for Non
  Parent-Child Communication, so what is the point in using it for a
  parent-child communication?</p>
  </li>
  <li><p>Using <a href="https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs" rel="nofollow noreferrer">Refs</a>, which is given as an end solution when it is not possible to use props and events. So why it is not possible with events at first place?</p>
  </li>
  </ol>
  <h2>My own thought</h2>
  <p>It seems to me the firing of an event and listening to it is only possible from child to parent, basically one way communication. The parent is able to emit an event but child component(s) are not able to capture the event. Why? I tried this and didn’t work:</p>
  <p>In the parent component I have (triggered by clicking a button in the parent component):</p>
  <pre><code>methods: {
    generateCharts: function () {
      this.$emit('generate-charts')
      console.log('charts generated')
  }
  </code></pre>
  <p>In the child component I have:</p>
  <pre><code>mounted () {
   this.parent.$on('generate-charts', function () {
     console.log('event captured') // Here nothing gets logged to the console
   })
  }
  </code></pre>
  <h2>Update</h2>
  <p>Just came across this answer <a href="https://stackoverflow.com/questions/40637288/emit-doesnt-trigger-child-events">Vue $emit</a>.
  Apparently this is not possible at all with Vue.</p>
  <p>At first instance it seems it is a deficiency because I have been in several situations where I needed to fire an event from parent and listen to it in the child.</p>
  <p>I can imagine there must be a reason why this is not possible with Vue, it is probably a design consideration, Vue experts explaining why this is the case, and what is the better design approach to solve in general a scenario to pass events from parent to child, would be very appreciated.</p>