title: pass emit click to parent in slot element to run function in parent vue 3 slot option api
body: <p>greeting king,</p>
  <p>I'm trying to emit click from child(todoitem.vue) element that contains button and slot in this component to parent(app.vue) that will run a method in parent. For example now when I click edit button then method in parent editable() will run and when I click delete button then run method of deletable() in parent. How to approach this. I had tried to pass using v-slot but it only send variable also try emit but failed to emit. I'm totally new to vue..thanks</p>
  <p>parent(app.vue)</p>
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;todolist&gt;
        &lt;todoitem v-for=&quot;each in a&quot; :key=&quot;each.list&quot;&gt;
            {{each.list}}
        &lt;/todoitem&gt;
  
    &lt;/todolist&gt;
      &lt;todolist&gt;
        &lt;todoitem v-for=&quot;each in b&quot; :key=&quot;each.list&quot;&gt;
            {{each.list}}
        &lt;/todoitem&gt;
  
    &lt;/todolist&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import todolist from &quot;./components/todolist.vue&quot;;
  import todoitem from &quot;./components/todoitem.vue&quot;;
  export default {
    name: &quot;App&quot;,
    data(){
      return{
        a:[
          {list:&quot;AAAA&quot;},
            {list:&quot;BBBB&quot;},
              {list:&quot;CCC&quot;},
        ],
              b:[
          {list:&quot;DDDD&quot;},
            {list:&quot;EEEE&quot;},
              {list:&quot;FFFF&quot;},
        ],
  
      }
    },
    components: {
   
      todolist,
      todoitem
    },
    methods:{
      editable(){
        console.log('editabel')
        
      },
      deletable(){
        console.log('deletable')
        
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  &lt;/style&gt;
  
  
  </code></pre>
  <p>child(todoitem)</p>
  <pre><code>&lt;template&gt;
  &lt;slot&gt;&lt;/slot&gt;
  
      &lt;button @click=&quot;test&quot;&gt;Edit&lt;/button&gt;
     &lt;button @click=&quot;test2&quot;&gt;delete&lt;/button&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;todoitem&quot;,
  method:{
    test(){
      console.log('edit click')
      this.$emit('edit-item')
    },
      test2(){
      console.log('delete click')
      this.$emit('del-item')
    }
  }
  
  
  }
  &lt;/script&gt;
  
  &lt;!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --&gt;
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  
  </code></pre>
  <p>todolist</p>
  <pre><code>&lt;template&gt;
  &lt;slot&gt;&lt;/slot&gt;
    &lt;div&gt;
     
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;todolist&quot;,
  
  };
  &lt;/script&gt;
  
  &lt;!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --&gt;
  &lt;style scoped&gt;
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  &lt;/style&gt;
  
  
  
  
  </code></pre>