title: Vue.js pass a callback as prop to child component and execute on parent when it is clicked
body: <p>I am trying to create a dropdown component, in which it receives various data and the list items are built dynamically, but I am having difficulty detecting the click on any item in the list</p>
  <p>parent</p>
  <pre><code>&lt;Dropdown
    :items=&quot;[
      {
        text: 'Edit',
        icon: 'fal fa-edit',
        click: editFunction(id)
      },
      {
        text: 'Delete',
        icon: 'fal fa-trash-alt',
        click: deleteFunction(id)
      }
    ]&quot;
  /&gt;
  </code></pre>
  <p>child <code>Dropdown.vue</code></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;dropdown&quot;&gt;
      &lt;a class=&quot;trigger&quot;&gt;
        &lt;i class=&quot;far fa-ellipsis-h&quot;&gt;&lt;/i&gt;
      &lt;/a&gt;
  
      &lt;ul class=&quot;items&quot;&gt;
        &lt;li v-for=&quot;(item, index) in items&quot; :key=&quot;index&quot; class=&quot;item&quot;&gt;
          &lt;a&gt;
            &lt;i :class=&quot;item.icon&quot;&gt;&lt;/i&gt;
            {{ item.text }}
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import Vue from 'vue'
  export default Vue.extend({
    props: {
      items: {
        type: Array,
        default: () =&gt; []
      }
    }
  })
  &lt;/script&gt;
  </code></pre>
  <p>currently in this way, as soon as the parent component is created,  the <code>editFunction(id)</code> and <code>deleteFunction(id)</code> methods are executed.</p>
  <p>I know it's possible because <a href="https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/buttons/simple/dropdown.vue" rel="nofollow noreferrer">vuetifyjs</a> it does that way, but I tried to inspect the source code but I got nowhere.</p>