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:

Answer 1

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 2

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.

Answer 3

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>