How to pass a method in Vue.js slot scope

Question

I'm using a slot scope in vuejs. It's working great. I can pass anything I want into the slot like this:

<slot :item1="item1">    
</slot>

The problem is that when I pass a function as a prop, it is undefined in the parent template. So this doesn't work:

<slot :my-method="myMethod">    
</slot>

In this example, myMethod is a method defined on the child vue component. (I am using typescript, so it is a method on the component class)

Any ideas on how to pass a function defined on the child component back through the slot props to the parent so that it can be called from within the slot code in the parent?

Answer 1

UPDATE

This answer was written for the older pre v2.6 syntax. Since then, this syntax has been marked for deprecation. The core functionality stays the same, the functions(methods) work the same way as the properties that are being bound upwards (from child to parent), however the definition uses v-slot:default now.

as per updated documentation (https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots),

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

Attributes bound to a element are called slot props. Now, in the parent scope, we can use v-slot with a value to define a name for the slot props we’ve been provided:

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

Here is a more complicated example, as you will notice, the function and the scoped slots are passed using slotProps

---

Original answer with pre v2.6 syntax. Example of how to pass the slot-scope

parent:

<template>
  <div slot="item" slot-scope="{ myLink, myMethod }">
    <button @click="myMethod(myLink.title)">
      Bookmark
    </button>
  </div>
</template>

child:

<template>
  <li v-for="myLink in links">
    <slot name="myLink" :myLink="myLink" :myMethod="myMethod"></slot>
  </li>
</template>

<script>
export default {
  methods: {
    myMethod(link) {
      link.bookmarked = true
    }
  }
}
</script>

Answer 2

Reading this article I have discovered that if you need to call a method programmatically (not from the template), you can actually pass a method from the parent component to the scoped-slot, but then you have to pass the same method to a child component through a prop: in this way you have access to the method, and can call it from the code.

This is how I used it:

Usage (in html, blade or other vue component)

<template>
    <cart-validation>
        <template v-slot:trigger="{ myMethod }">
            <!-- here you pass the method as a prop -->
            <cart :my-method="myMethod">
            </cart>
        </template>
    </cart-validation>
</template>

Parent component (CartValidation.vue)

<template>
    <div>
        <slot name="trigger" :my-method="myMethod" />
    </div>
</template>
<script>
    export default {
        name: 'CartValidation',
        methods: {
            myMethod() {
                // here you define your method
                console.log('hello!');
            }
        },
    };
</script>

Child component (Cart.vue)

<script>
    export default {
        name: 'Cart',
        props: ['myMethod'],
        mounted() {
            // here you call the method
            this.myMethod();
        }
    };
</script>

In other parts of my code I used other elements inside the slot, but in each child component I could call this.myMethod(). I hope this helps other people :)

Answer 3

Based on all answer, I have trying to create a prof of concept code sample here https://codesandbox.io/s/vuejs-v-slot-sample-z9r9c

my point is to create a single button component, a second by using the slot and the last one with a second component there are using the slot function from the first button component and connect with the $emit function together.

hope its useful.