Vue，组合：将 "slot" 道具作为属性值传递

Question

在 React 中非常简单，因为没有“插槽”。一切都是参数。但我不知道如何将插槽作为参数传递。这是我所做的。

我创建了一个新组件，它使用来自 Vuetify 的 v-menu 组件：

// SelectorComponent.vue
<template>
  <v-menu>
    <template v-slot:activator="{ on }">
      <slot name="activator" v-on="on" />
    </template>
    ...

然后我使用了那个组件：

<Selector>
  <template v-slot:activator="{ on }">
    <v-btn text v-on="on">Type</v-btn>
  </template>
</Selector>

并且当您按下“类型”按钮时，它不显示菜单。但是，如果我用按钮替换插槽，它会起作用：

// It works!
<template>
  <v-menu outlined :close-on-content-click="false" offset-y>
    <template v-slot:activator="{ on, attrs }">
      <v-btn text v-on="on">Type</v-btn>
    </template>

我做错了什么？

Answer 1

您应该通过将插槽命名为 activator 并将 on 属性绑定到 on 插槽属性来使用 scoped slots，可以在其中深入到您的自定义组件你收到 on 作为 <template v-slot:activator="{ on }"> :

/ SelectorComponent.vue
<template>
  <v-menu>
    <template v-slot:activator="{ on }">
      <slot name="activator" :on="on" />
    </template>
    ...

然后像这样使用它：

<Selector>
  <template v-slot:activator="{ on }">
    <v-btn text v-on="on">Type</v-btn>
  </template>
</Selector>

Vue，组合：将 "slot" 道具作为属性值传递

Vue, composition: pass a "slot" prop as a an attribute value

javascript

vue.js

vuejs2

vuetify.js

v-slot