title: Vuejs passing function from parent to child
body: <p>I have a beginner question about passing function from parent to child. In my example, I want to to use the child more times and sometimes it should to do someting else <code>v-on:focus</code>. How can i do that? There are options to pass it with prop but i don't know how and i think it's not good to do it ? Maybe with EventBus and if yes then how ? I want to know the right way how to do it in VueJs.</p>
  
  <p><strong>Here is the Parent Component:</strong></p>
  
  <pre><code>import Child from "./child.js";
  export default {
    name: "app",
    components: {
      Child
    },
    template: ` 
                &lt;div&gt;
                  &lt;child&gt;&lt;/child&gt;
                  &lt;child&gt;&lt;/child&gt;
                  &lt;child&gt;&lt;/child&gt;
                &lt;/div&gt;
              `
  };
  </code></pre>
  
  <p><strong>And here is the child Component:</strong></p>
  
  <pre><code>export default {
    name: "test",
    template: `
                &lt;div class="form-group"&gt;
                  &lt;div class="input-group"&gt;
                    &lt;input v-on:focus="functionFromChild"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
              `,
    methods: {
      functionFromChild() {
        //run the function from parent
      }
    }
  };
  
  </code></pre>