Pass down activator slot

Question

In Vue 1.x I used to do this:

Component1:

<template>
    <v-dialog>
        <slot name="activator" slot="activator"></slot>
    </v-dialog>
</template>

Component2:

<template>
    <component-1>
        <slot name="activator" slot="activator"></slot>
    </component-1>
</template>

So I could do this in Component3:

<template>
    <h3>I'm component 3</h3>

   <component-2>
       <template slot="activator">
           <v-btn></v-btn>
       </template>
    </component-2>
</template>

It worked fine. But how can I do the same using Vue's 2.6 v-slot syntax?

Replacing the "template" slots in component 1 and 2 with this does not work:

<template v-slot:activator="{on}">
    <slot name="activator" v-on="on"></slot>
</template>

I can't find a way of proxying the "activator" slot from v-dialog all the way down to component 3.

arielnmz arielnmz · Accepted Answer · 2019-10-01T20:09:33

Got it working, the solution is to re-bind the entire scope to the slot being "passed down", rather than just the v-on signal handler like this:

<template v-slot:activator="scope">
  <slot name="activator" v-bind="scope"></slot>
</template>

(detailed in this other answer)

vue - how to pass down slots inside wrapper component?

Pass down activator slot

1 Answers