传递激活器插槽答案

【问题标题】：Pass down activator slot传递激活器插槽
【发布时间】：2020-01-30 13:10:44
【问题描述】：

在 Vue 1.x 中我曾经这样做过：

组件1：

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

组件2：

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

所以我可以在 Component3 中做到这一点：

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

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

效果很好。但是如何使用 Vue 的 2.6 v-slot 语法来做同样的事情呢？

用这个替换组件 1 和 2 中的“模板”slots 不起作用：

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

我找不到代理从 v-dialog 一直到组件 3 的“激活器”插槽的方法。

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

得到它的工作，解决方案是将整个范围重新绑定到正在“传递”的插槽，而不仅仅是像这样的 v-on 信号处理程序：

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

（在其他答案中有详细说明）

vue - how to pass down slots inside wrapper component?

【讨论】：