title: Vue best practice for calling a method in a child component
body: <p>I have been reading lots of articles about this, and it seems that there are multiple ways to do this with many authors advising against some implementations.</p>
  
  <p>To make this simple I have created a really simple version of what I would like to achieve.</p>
  
  <p>I have a parent Vue, <strong>parent.vue</strong>. It has a button:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;button v-on:click="XXXXX call method in child XXXX"&gt;Say Hello&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>In the child Vue, <strong>child.vue</strong> I have a method with a function:</p>
  
  <pre><code>methods: {
      sayHello() {
  
          alert('hello');
     }
    }
  </code></pre>
  
  <p>I would like to call the <strong><code>sayHello()</code></strong> function when I click the button in the parent.</p>
  
  <p>I am looking for the best practice way to do this. Suggestions I have seen include Event Bus, and Child Component Refs and props, etc.</p>
  
  <p>What would be the simplest way to just execute the function in my method?</p>
  
  <p>Apologies, this does seem extremely simple, but I have really tried to do some research.</p>
  
  <p>Thanks!</p>