传递激活器插槽

Posted 2023-02-22

【中文标题】传递激活器插槽

【英文标题】：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 的“激活器”插槽的方法。

【参考方案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?